跨域问题的解决方法

协议+域名+端口号，前后端只要三者不同就是跨域

1、前端解决跨域-设置代理

代理服务器是介于前端和后端之间的中间服务层，前端向代理服务器发送请求时，代理服务器是允许跨域请求的，而代理服务器在收到前端的ajax请求时，会通过changeOrigin的方式，将前端请求的接口，转发给target所指向的目标服务器，从而以相同的域向目标服务器发送请求，由于代理服务器和目标服务器之间的域是相同的，因此不会出现跨域问题，从而代理服务器会收到目标服务器的响应，再将响应转发给前端即可。

1.1、vue

  在vue.config.js中编写如下代码：

//跨域设置
module.exports = {
     devServer: {//开发环境的服务
        proxy: {//代理设置
            '/api': {
                target: '请求地址',
              changeOrigin: true,//是否跨域
                 pathRewrite: {//路径重写
                     '^/api': ''//^/api以/api开头
                 }
            }
       }
     },
}

1.2、react

方法1：

  在package.json中追加如下配置

"proxy":"http://localhost:5000"

使用：

function getStudentDate() {
        axios.get('/students').then(res => {
                console.log('成功了', res);
            },
            (err) => {
                console.log('失败了', err);
            })
    }

说明：

1. 优点：配置简单，前端请求资源时可以不加任何前缀。
2. 缺点：不能配置多个代理。
3. 工作方式：上述方式配置代理，当请求了3000不存在的资源时，那么该请求会转发给5000 （优先匹配前端资源）

方法2：

  第一步： 在src文件夹下创建代理配置文件setupProxy.js，只能是js文件，ts不支持

  第二步： 编写setupProxy.js配置具体代理规则：

注：这里使用的是createProxyMiddleware，我试过proxy，发现这个现在不能用了

const {createProxyMiddleware} = require('http-proxy-middleware');   //引入
module.exports = function (app) {
    app.use(
        createProxyMiddleware(
            '/api1', {// //使用/api1替换http://地址，遇见/api1这个前缀这个请求，就会触发该代理
                target: 'http://localhost:5000',//请求转发给谁
                changeOrigin: true,//控制服务器收到的请求头中的Host字段的值，
                // changeOrigin默认是false：请求头中host仍然是浏览器发送过来的host(http://localhost:3000(我的前端服务端口号是3000)),
                // 如果设置成true：发送请求头中host会设置成target（http://localhost:5000）
                pathRewrite: {//重写请求路径（很重要，必须）
                    '^/api1': ''//api1替换为空
                },
                secure: false, // 是否验证证书
            }),
            //配置第二个代理
        createProxyMiddleware(
            '/api2', {
                target: 'http://localhost:5001',
                changeOrigin: true,
                pathRewrite: {
                    '^/api2': ''
                },
                secure: false,
            })
    )
};

使用：

    function getStudentDate() {
        axios.get('/api1/students').then(res => {
                console.log('成功了', res);
            },
            (err) => {
                console.log('失败了', err);
            })
    }

    function getCarDate() {
        axios.get('/api2/cars').then(res => {
                console.log('成功了', res);
            },
            (err) => {
                console.log('失败了', err);
            })
    }

说明

1. 优点：可以配置多个代理，可以灵活的控制请求是否走代理。
2. 缺点：配置繁琐，前端请求资源时必须加前缀。

2、后端解决跨域

2.1、使用的是node.js搭建的服务后台

在app.js中编写如下代码，解决跨域问题，根据具体情况进行修改

app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By",' 3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});