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

如光不息
  • 1
新手上路,请多包涵

直接使用可以请求到数据,服务端那边也配置了*。
image.png
以上是直接使用,没有对axios封装的。

封装后代码:
image.png
image.png
组件中使用:
image.png
报错信息:
image.png

回复
阅读 579
7 个回答

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

应该是content-type问题把

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

只要methodGETPOSTHEAD,然后不要带自定义的headerContent-Type也不要超出:application/x-www-form-urlencodedmultipart/form-datatext/plain这三种,基本上就可以认为是简单请求。改成application/json就不符合简单请求的定义了,会多出preflight request

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

这里的话,后台接口加上

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

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

你的这个问题是由于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这三种,基本上就可以被视为是「简单请求」
  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/, '')
  }
}

}

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏