vue-跨域问题
同源策略
什么是浏览器的同源策略
- 当前浏览器发起Ajax的时候要求,当前页面,和请求地址同源
- 当前页面 : http://localhost.com:3000
- 请求的服务器地址 : http://www.baidu.com (当前地址,与请求地址不同源,浏览器不会让你请求成功)
http 协议
www 子域名
baidu.com 主域名
:3000 端口号,
m.baidu.com q.baidu.com
localhost:8000 localhost:3000 ,
必须协议,子域名,主域名,端口号,一致才为同源地址
什么是跨域 ,实现跨域的方法有那些
跨域
- 跨域是指: 绕过同源策略跨域名获取数据,(所有的跨域都需要后端支持)
跨域的方法
1. jsonp
2. CRS 浏览器响应头信息允许跨域(Access-Control-Allow-Origin : *
) 允许任何域名访问 --后端设置
3. 本地服务器代理跨域—proxy
什么是jsonp?
服务器跨域的实现原理
- 服务器没有浏览器一说,所以没有同源限制
- 去请求本地服务器的地址——本地服务器——去请求真正的地址
- 请求回来数据后——本地服务器——转给当前Ajax请求
vue-cli 的代理跨域
代理跨域的原理
就是让原有的地址去访问数据,访问数据完成之后,再将获取数据的地址改成我们本地服务器的地址,
这样就不会被浏览器的同源策略进行拦截
代理跨域的实现方法
- vue脚手架基于webpack ,webpack本地服务器
devServer
- 想实现代理跨域,只需要实现 配置
devServer
- vue配置webpack 通过
vue.config.js
要在根目录
新建一个vue.config.js
vue.config.js
需要重启
module.exports = {
// devServer 配置本地服务器
devServer : {
// 自动打开浏览器
open : true,
// 自定义端口号,不推荐使用
// port : 8080,
// 代理地址
proxy : {
// 当本地服务器碰到有'/motor' 的参数地址的时候,就开始去代理
'/motor' : {
// 真正去请求数据的地址
target : "https://www.dcdapp.com",
// 是否跨域(求改请求源)
changeOrigin : true,
}
}
}
}