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,	
			}
		}
	}
}
相关推荐
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页