什么是跨域?
所谓的同源是指,域名、协议、端口均为相同。
所谓的跨域,不同的域名、协议、端口皆为不同域
一个域与另一个域名、协议或者端口不同的域的之间访问都叫跨域
解决跨域的方法和方案:
1:通过服务端代理请求。如PHP,服务端语言php是没有跨域限制的,让服务器去别的网站获取内容然后返回给页面。
2:第二种:jsonp跨域
1. jsonp跨域就是利用script标签的跨域能力请求资源
2. jsonp与ajax没有半毛钱关系!!
3. 浏览器的同源策略限制了js的跨域能力,但没有限制link img iframe script 的跨域行为
实现方式:
1. 利用js创建一个script标签,把json的url赋给script的scr属性,
2. 把这个script插入到页面里,让浏览器去跨域获取资源
3. JS先声明好回调函数,插入页面后会代为执行该函数,并且传入json对象为其参数。
注意:
1. jsonp只针对get请求
2. script标签加载回来的资源会被当成js在全局执行
3:CORS 跨域资源共享(xhr2)
CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)
它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制
整个CORS通信过程,都是浏览器自动完成,不需要用户参与
对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样
实现CORS通信的关键是服务器,只要服务器实现了CORS接口,就可以跨源通信
4:nginx代理跨域
通过nginx服务器转发跨域请求,达到跨域的目的
--------------------------------------------
5:在vue项目中,可以在vue.config.js中使用proxy配置node服务代理,因为nodejs没有同源策略。所以支持跨域
module.exports = defineConfig({
transpileDependencies:ture,
devServer:{
port:8000,
//配置解决跨域问题,配置成功后重启项目
proxy:{
//匹配路径 就是地址栏后面第一个字段
'第一个字段':{
target:'https://xxx' //这里是远程服务器地址,
changeOrigin:true //允许改变源
}
}
}
})
设置之后记得把axios请求baseurl 的请求地址改成本地 localhost地址