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？

封装-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,	
			}
		}
	}
}