vue_cli3.x 跨域访问
本地使用vue创建项目时,由于需要开启本地服务,因此会占用端口,导致发送ajax请求时需要跨域,以下是跨域请求的解决方案之一,出现同样问题的朋友可以借鉴参考,谢谢!
- 问题一
问题描述:当我们发送跨域请求时,如果不需要保留cookie信息,出现访问限制。
解决方案:
//在服务器端设置请求头,允许所有域名访问
header('Access-Control-Allow-Origin:*');
- 问题二
问题描述:跨域成功后,设置session发现cookie为空。
解决方案:
//在main.js中添加如下代码:
import axios from 'axios'
axios.defaults.withCredentials = true; //设置发起请求的‘凭据模式’为‘include’,
//session值可以正常打印出来
- 问题三
问题描述:session值可以打印,但是跨域请求失败,被CORS策略阻止访问。
报错信息:
在“http://panhuo.cn/saas/jxc”中对XMLHttpRequest的访问已被CORS策略阻止:当请求的凭据模式为“include”时,响应中的“Access- control - allow - origin”报头的值必须不是通配符“*”。XMLHttpRequest发起的请求的凭据模式由withCredentials属性控制。
解决方案:
//在vue.config.js文件中设置代理
proxy: { //配置代理
//跨域设置
"/api": {
target: "http://learnku.cn:80/saas/jxc", //请求源地址
ws: true, //是否代理
changeOrigin: true, //是否跨域
}
}
注意: 当配置代理成功后,需要重启服务,否则配置文件不会生效。
至此问题已解决,跨域成功,且可以获取到cookie值。
本作品采用《CC 协议》,转载必须注明作者和本文链接
推荐文章: