跨域产生的原因
产生跨域的原因:同源策略
同源策略:是对ajax的一个主要约束,它为通信设置了“相同的域、相同的端口号、相同的协议”这一限制
跨域产生的5中情况
http://a.com 和 http://b.com 不允许访问(不同域)
http://a.com 和 https://a.com 不允许访问(同一域名,不同协议)
http://a.com 和 http://a.com:8080 不允许访问(同一域名,不同端口)
http://a.com 和 http://192.168.1.1 不允许访问(域名和域名对应的ip不同)
http://a.a.com 和 http://b.a.com 不允许访问(主域名相同,子域名不同)
跨域产生的报错截图:
使用场景:
因为目前基于web技术开发的项目主要是前后端分离的项目,即后端提供数据访问的接口,前端调取接口并实现数据展现和ui交互,这里后端提供的接口通常为线上真实的接口,本地访问通常是会产生跨域情况。
跨域的解决方案:
1、jsonp
2、代理(前端代理,后端代理)
3、cors
jsonp方案:
jsonp实现原理:主要是利用动态创建script标签(src属性)请求后端接口地址,然后传递callback参数,后端接收callback,后端经过数据处理,返回callback函数调用对的形式,callback中的参数就是json。
前段代理:
前段代理在vue项目中主要是通过vue脚手架中的config中的index文件来配置的,其中有个proxyTable来配置跨域的,前端代理核心实现通过http-proxy-middleware插件来实现的,vue2.x和vue3.x脚手架代理跨域实现原理一样。
cors方案:
CORS全称叫跨域资源共享,主要是后台工程师设置后端代码来达到前端跨域请求的
CORS的原理:CORS定义一种跨域访问的机制,可以让ajax实现跨域访问。CORS允许一个域上的网络应用向另一个域提交跨域ajax请求。实现此功能非常简单,只需有服务器发送一个响应标头即可。
vue项目中实现跨域,在根目录下创建vue.config.js文件,在文件内配置以下内容:
module.exports={
lintOnSave:false,
runtimeCompiler:true,
devServer:{
//port:9999,
proxy:{
//此处写跨域配置
"/api":{
target:"",//代理网址
//ws:true,
changeOrigin:true,//允许跨域
pathRewrite:{
"^/api":'',//rewrite path //重写
}
}
}
}
}