关于跨域处理问题

跨域是什么？

我们的地址包括了 协议、域名、端口这三部分，前后端分离的时候，前端要去请求后端的数据，在这个过程中，只要上面三个有一个不同就算是跨域，

跨域的解决办法：

其实最简单的就是交给后端来处理：

在后端中加上一个叫做cors的中间件即可

 
//npm i cors 或者 npm install cors # 再安装解决跨域模块

const cors = require("cors");
router.use(cors()); //使用cors中间件

在这里只是做一个记录，因为在一开始的时候我就知道可以用cors来作为跨域处理。

但是就是想要尝试在前端解决，最后觉得太麻烦了，所以还是。。。。。。

我花了好长时间才知道原来解决跨域问题后端处理起来比前端简单点。

虽然说后端处理简单有点，但是前端如果也不做跨域处理的花，也有可能会出错

前端可以在vueconfig文件下设置代理：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
    proxy:{
      '/api':{
        target:'http://127.0.0.1:3000/',
        changOrigin:true,//允许跨域
        pathRewrite:{
          /**
           * 重写路径，
           * 当我们在浏览器中看到的浏览器地址为http://localhost:8080时
           * 实际上是target:'http://127.0.0.1:3000/'地址，因为重写了api
           */
          '^/api':'' 
        }
      }
    }
  }
})

// 实现跨域处理

此方法只能在开发环境中使用。
后端请求地址是http://192.168.92.2:3000，所有api的接口url都以/api开头。
所以首先需要匹配所有以/api开头的.然后修改target的地址为http://192.168.2.92:9090。
最后修改pathRewrite地址:将前缀’^api’转为’/api’。
如果本身的接口地址就有’/api’这种通用前缀，就可以把pathRewrite 删掉。
配置一下axios.defaults.baseURL = '/api’这样就可以保证动态的匹配生产和开发环境的定义前缀，代码如下:

// mock服务器
axios.defaults.baseURL ='/api';