前端在开发阶段时如何解决跨域问题

同源策略：协议，域名，端口，三者有其中一个不一致就属于跨域。

1. 禁用浏览器跨域限制

//在浏览器快捷方式-右键-属性-目标 后面添加如下代码  空格
 --disable-web-security --user-data-dir=C:\MyChromeDevUserData
 然后在C盘新建文件夹MyChromeDevUserData
 //或者
 创建一个快捷方式发送到桌面 ，快捷方式--》右键---》属性页面中的目标输入框里加上   --disable-web-security --user-data-dir=C:\Program Files (x86)\Google\Chrome\Application （注意：--user-data-dir的值就是刚才新建的目录。）

2. vue.config.js中设置反向代理

module.exports = {
  devServer: {
    // host: 'xxx',
    // open: 'xx',
    // port: 'xx'
    proxy: {
      '/api': {
        target: 'http://localhost:3000', //要代理的地址
        changeOrigin:true, //是否跨域
        pathRewrite: { //路径重写，要代理的地址里没有/api就写
          '^/api': '',
        },
     //配置完成记得重启项目

然后在请求时设置baseURL为/api：

async login() {
      // const res = await axios.post('http://localhost:3000/login', { xxx});
      const { data: res } = await axios.post('/api/login', { xxx });
      将请求地址换成/api开头

3. 在后端服务器设置cors

const express = require('express');
// const cors = require('cors)
// app.use(cors({}))  // 这样就是告诉浏览器，我允许这个接口跨域方法，请放行

const app = express();