简介跨域
跨域是由浏览器的同源策略产生的一种自卫行为。
一个URL由协议protocol / 主机host / 端口port组成,这三部分都相同时为同源。当前url和请求url不同源时就会产生跨域。
解决方法
- 方法一:前端本地代理proxy
vue3本地代理,指在请求数据时进行拦截,再由服务端发出请求,这是前端开发环境解决跨域常用方法。
找到项目的配置文件(后缀config.js),没使用构建工具的v3项目在刚创建之后没有vue.config.js文件,需要手动创建该文件并补充以下代码:(若使用构建工具webpack或vite,方法类似详细见其官方文档)
// vue.config.js
devServer: {
host: '0.0.0.0',
port: 8888,
proxy: {
"/api": {
target: "http://xxxx:80",//你的接口地址
changeOrigin: true,//是否跨域
pathRewrite: {
"^/api": ""//接口重写,表示/api开头的就是代理到target,即是http://xxxx:80
}
}
}
},
// 接口文件,这里使用fetch,axios同理
//const result = await fetch('http://xxxx:80/getData', { method: 'GET' });
//改为
const result = await fetch('/api/getData', {
method: 'GET' });
- 方法二:静态服务器nginx反向代理
反向代理a–>c<–b,举例说明:a和b之前不能直接沟通,c这里就是nginx像个中介,c从b那里进货,a从c这里买货,a不用关心进货商只关心货,这样就解决了ab之间的跨域问题。示例代码如下:
//nginx.conf
server {
listen 80;
location /api {
rewrite ^/api/(.*)$ break;
proxy_pass http://xxxx:80;
}
}
- 方法三:添加响应头跨域权限
普通跨域请求:只需服务器端设置Access-Control-Allow-Origin
带cookie跨域请求:前后端都需要进行设置
- 方法四:jsonp
通常为了减轻web服务器的负载,我们把js、css、图片等静态资源分离到另一台独立域名的服务器上,在html页面中再通过相应的标签从不同域名下加载静态资源,而被浏览器允许。
html中有的标签天然支持跨域,比如<script src="http://www.baidu.com"></script>但是只支持get请求。
总之
解决跨域CORS方法主要有3种:代理、接口header、jsonp,推荐使用代理,header。
参考文章
[1] 什么是跨域?跨域产生原因与解决方法