你还在搜跨域怎么解决？

日常前端开发工作中必不可少的解决跨域问题。 跨域是什么？

跨域指的是不同域名、不同端口或不同协议之间的网络请求。在浏览器中，如果一个网站的 JavaScript 代码试图请求其他网站的资源，就会被浏览器阻止，因为这可以滥用用户的隐私和安全

以VUE为例。需要在请求中配置base, 同时在vite中配置如下代码 。

axios

const service: AxiosInstance = axios.create({
  // baseURL: `${baseUrl}`,
  baseURL: '/api',
  timeout: TIMEOUT * 1000
})

vite

    proxy: {
      '/api': {
        target: 'http://192.168.5.6:7070',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }

现在。一个谷歌插件直接杀死比赛！

去谷歌应用商城搜索 CROSS DOMAIN

需要跨域的域名直接添加就OK。

这样婶的。

生产

生产的话用Nginx解决吧

server{
    listen 80;
    server_name example.com;

    location /api {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
        if ($request_method = 'OPTIONS') {
            return 204;
        }
        proxy_pass http://backend/api;
    }
}

这个配置文件做了以下几件事情：

1. 定义服务器的监听端口和域名。
2. 配置location /api，使得访问/api下的请求可以跨域访问。在这里，我们使用Access-Control-Allow-Origin头部将允许所有来源的请求，Access-Control-Allow-Methods头部定义了允许的请求方法，Access-Control-Allow-Headers头部定义了允许的请求头。
3. 对于OPTIONS请求，我们直接返回204，这样可以避免额外的请求。
4. 最后，我们将/api的请求代理到后端服务[http://backend/api。这个地址是你实际生产地址。]