前端处理跨域问题！

一、为什么会出现跨域：

简单理解：就是域名、端口号、协议之中只要有一个不同。都是跨域。

在前后端分离的情况下，前后端的域名是不一样的，此时就出现了跨域的问题。

出于浏览器的同源策略限制。

同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。

可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。

所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）

二、什么是跨域

当一个请求 url 的协议、域名、端口三者之间任意一个与当前页面 url 不同即为跨域

当前页面url 被请求页面url 是否跨域 原因

http://www.test.com/ http://www.test.com/index.html 否 同源（协议、域名、端口号相同）

http://www.test.com/ https://www.test.com/index.html 跨域 协议不同（http/https）

http://www.test.com/ 百度一下，你就知道 跨域 主域名不同（test/baidu）

http://www.test.com/ http://blog.test.com/ 跨域 子域名不同（www/blog）

http://www.test.com:8080/ http://www.test.com:7001/ 跨域 端口号不同（8080/7001）

三、解决问题

vue项目解决跨域：

在vue.config.js里面

const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
    publicPath: './',
    transpileDependencies: true,
    devServer: {
        proxy: {
            '/api': {
                // 请求的代称，写在Axios里的BaseUrl
                target: ' http://sale.gomicsgene2.com:8091/', // 真实请求URl
                ws: true,
                changeOrigin: true, // 允许跨域
                pathRewrite: {
                    //替换，通配/api的替换成对应字符
                    //     /* 重写路径，当我们在浏览器中看到请求的地址为：http://localhost:8080/api/core/getData/userInfo 时
                    //       实际上访问的地址是：http://localhost:8088/spring/core/getData/userInfo,因为重写了 /api
                    //      */
                    '^/api': '' //当你的接口中没有/api字眼时，采用这种，直接替换成空即可
                        //     '^/api': '/api'   //当你的接口中刚好有/api 时，采用这种方式
                }
            }
        }
    }
});

把之前axios里面baseURL换成/api就可以了

当uniapp项目遇到跨域问题：

去官网可以咯！

什么是跨域 | uni-app官网

还看不懂去这→9种常见的前端跨域解决方案（详解） - 知乎