Axios二次封装后出现了跨域问题怎么解决？？急！！！

Question

直接使用可以请求到数据，服务端那边也配置了*。

以上是直接使用，没有对axios封装的。

封装后代码：


组件中使用：

报错信息：

Answer 1

你的这个问题是由于Content-Type的值：application/json超出了简单请求允许的范围，导致请求变为了复杂请求，为此浏览器需要发送预检请求（option请求）去验证服务端是否允许该请求，它会带上以下信息：

Access-Control-Request-Headers: content-type
Access-Control-Request-Method: POST

如果想让服务端放行的话，那么需要在服务端代码里加上（nodeJs为例）：

res.header('Access-Control-Allow-Headers',' content-type')

简单请求的定义：

只要method是GET、POST或是HEAD然后不要带自订的header，Content-Type也不要超出：application/x-www-form-urlencoded、multipart/form-data或是text/plain这三种，基本上就可以被视为是「简单请求」

Answer 2

1. axios封装的配置中，去掉绝对路径；

   // 默认配置
   const config = {
     withCredentials: true,
     // 请求的完整路径就是baseURL中的
     baseURL: '/api'
   }

2. 在vue.config.js或者vite.config.js中配置;

server: {

proxy: {
  // 选项写法
  '/api': {
    target: 'https://console.leafage.top/api',
    changeOrigin: true,
    rewrite: (path) => path.replace(/^\/api/, '')
  }
}

}

Answer 3

跨越跟前端没有关系，通常都是这么解决的：
前端：“兄弟，你接口跨域了，快瞅瞅”
后端：“奥，我看下，稍等”
two minutes later...
后端：“好了，你再试试”
前端：“嗯”
two seconds later...
前端：“可以了”

Answer 4

应该是content-type问题把

Answer 5

那就在vue.config.js里配置proxy，线上再使用nginx做下转发

Answer 6

只要method是GET、POST、HEAD，然后不要带自定义的header，Content-Type也不要超出：application/x-www-form-urlencoded、multipart/form-data、text/plain这三种，基本上就可以认为是简单请求。改成application/json就不符合简单请求的定义了，会多出preflight request。

具体可以参考跨源资源共享。

这里的话，后台接口加上

res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'content-type');

Answer 7

是不是加了后端cors里没配置的请求头啥的