Vue跨域问题 has been blocked by CORS policy:....No ‘Access-Control-Allow-Origin‘ header

Vue跨域踩的坑

has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

问题再现

axios封装：

//为了使用方便自定义了一个request请求方法 
export function request(config) {
  // 1.创建axios的实例
  const instance = axios.create({
      baseURL:"http://127.0.0.1:20011",
    timeout: 5000,
  })
  // 2.1.请求拦截的作用
  instance.interceptors.request.use(config => {
    return config
  }, err => {
    console.log(err);
  })
  // 2.2.响应拦截
  instance.interceptors.response.use(res => {
    return res.data
  }, err => {
    console.log(err);
  })
  // 3.发送真正的网络请求
  return instance(config)
}

axios使用

//具体的请求方法
export function checkLogin(username,password) {
  return request({
    url:'/login',
    method:"post",
    data:{
      'username':username,
      'password':password,
    },
  })

运行后

重复请求两条数据？？？

好家伙报错还是挺直接的大家一看就知道是跨域的问题，知道问题了就上百度搜索，

下面就是踩坑全过程（一下踩坑全路程，赶时间的直接到末尾<最终解决方案>）

百度来百度去，找到了以下方法：

将上边的拦截器里边的请求拦截的data数据格式化为&分割的数据

   // 2.1.请求拦截的作用
instance.interceptors.request.use(config => {
      if(config.method==='post' || config.method==='POST'){
        config.data=qs.stringify(config.data)
      }
    return config
  }, err => {
    console.log(err);
  })

修改后：

这下请求只有一个了但是我们的数据传输格式要的是json看到请求的格式不是json

修改请求头为json

export function checkLogin(username,password) {
  return request({
    url:'/login',
    method:"post",
    data:{
      'username':username,
      'password':password,
    },
      //添加数据头为json
    headers: {
      'Content-Type':'application/json'
    }

  })
}

执行后：

这。。。。

继续找，终于找到方法了，

正确的做法是在配置文件中添加跨域：

vue2直接在config/index.js中配置

vue3需要在根目录下创建一个vue.config.js的配置文件

我使用的vue3，演示代码是3的使用2其实是一样的

module.exports={
    devServer:{
        proxy:{
            ["/dev-api"]:{
            target:'http://localhost:20011',
              changeOrigin:true,
                pathRewrite: {
                    ['^' + "/dev-ap"]: ''
                }
            }
        }

    }
}

到这里访问成功了，所有配置如下(将开始乱七八糟的东西统统去掉)：
request.js:

import axios from 'axios'
export function request(config) {
  // 1.创建axios的实例
  const instance = axios.create({
      baseURL:"/dev-api",
    timeout: 5000,
  })
    // 2.1.请求拦截的作用
  instance.interceptors.request.use(config => {
    return config
  }, err => {
    console.log(err);
  })
  // 2.2.响应拦截
  instance.interceptors.response.use(res => {
    return res.data
  }, err => {
    console.log(err);
  })
  // 3.发送真正的网络请求
  return instance(config)
}

home.js

import {request} from "./request";
export function checkLogin(username,password) {
  return request({
    url:'/login',
    method:"post",
    data:{
      'username':username,
      'password':password,
    },
  })
}

怎么现在就可以了？

为了搞清楚这个问题我找了点资料

通过查看请求的地址看到是：
http://localhost:8080/dev-api/login 可是我的目标是 http://127.0.0.1:20011/login 怎么可以成功了？
实际上当你设置了代理前缀为dev-api ，请求的地址是**/dev-api/login** 时,相当于被代理到了目标服务器地址(http://127.0.0.1:20011)简单的理解(个人认为)/dev-api等于就是http://127.0.0.1:20011同时还开启的跨域问题解决了

小白一枚>>有什么理解错了的，可以指出来，共同学习！！！！！