跨域CORS解决办法

简介跨域

跨域是由浏览器的同源策略产生的一种自卫行为。
一个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] 什么是跨域？跨域产生原因与解决方法