前端跨域解决方案

前端跨域解决方案

什么是跨域

跨域是浏览器为了安全而做出的限制策略
浏览器请求必须遵循同源策略：同域名，同协议，同端口

跨域的解决方案

常用的三种方式

1. CORS跨域
   CORS跨域：服务端设置，前端直接调用
   说明:后端允许前端某个站点进行访问

2. JSONP跨域
   *JSONP跨域：前端适配，后端配合
   说明：前后台同时改造
   前端需要安装JSONP插件：npm i jsonp --save-dev
   调用：import jsonp from “jsonp”
   jsonp(url,option,(err,res)=>{})
   jsonp不是一个请求 在XHR中找不到，在js里边,可以认为他就是一个js脚本

3. 代理跨域
   接口代理 - 通过修改nginx服务器配置来实现
   说明：前端修改，后台不动
   创建一个vue.config.js文件，这是一个webpack配置表，webpack最终会传送给nodejs服务器，nodejs遵循的是commonjs规范 ，所以不能用import了，要用module.exports = {}
   要这样配置：

module.exports = {
	devServer:{
		host:'localhost',  //主机
		port:'8080',  //端口
		proxy:{       //跨域代理
			'/api':{
				target:'代理的目标地址',
				changeOrigin:true,      //是否将主机投的原点改成目标的URL地址
				pathRewrite:{            //这个是转发地址的
					"/api":'',
				}
			}
		}
	}
 }

下一篇：vue接口错误拦截