位置: IT常识 - 正文

vue跨域问题解决：Access to XMLHttpRequest at‘httplocalhost(vue解决跨域的几种办法)

编辑：rootadmin

如果在后端django里配置了django-cors-headers，前端还是报Access to XMLHttpRequest at‘httplocalhost这样的跨域问题，可以通过以下的方式解决！通过配置vue.config.js、proxy 实践解决跨域方法（基于封装好的axios，非原生 ...

推荐整理分享vue跨域问题解决：Access to XMLHttpRequest at‘httplocalhost(vue解决跨域的几种办法)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue中解决跨域问题,vue中解决跨域问题,如何解决vue跨域问题,vue跨域解决方案简书,vue跨域解决方案简书,vue 跨域问题,vue跨域解决方案简书,vue 跨域问题,内容如对您有帮助，希望把文章链接给更多的朋友！

如果在后端django里配置了django-cors-headers，前端还是报Access to XMLHttpRequest at‘httplocalhost这样的跨域问题，可以通过以下的方式解决！

通过配置vue.config.js、proxy

实践解决跨域方法（基于封装好的axios，非原生）

vue跨域问题解决：Access to XMLHttpRequest at‘httplocalhost(vue解决跨域的几种办法)

1、在vue项目根目录下找到vue.config.js文件（如果没有该文件则自己创建），在proxy中设置跨域，在proxy中设置要访问的地址，并重写/api为空的字符串。

vue.config.js// const { defineConfig } = require('@vue/cli-service')//在vue中使用proxy进行跨域的原理是：//将域名发送给本地的服务器（启动vue项目的服务,loclahost:8080），//再由本地的服务器去请求真正的服务器。module.exports = { devServer:{ proxy:{ '/api':{//表示拦截以/api开头的请求路径 target:'http://（这里填你项目真实的后端地址）', changOrigin: true,//是否开启跨域 pathRewrite:{ '^/api':'' //重写api，把api变成空字符，因为我们真正请求的路径是没有api的 } } } }}

2.将base_url设置成api

export default { base_url: 'api'}

再补充一下原理：

1、为什么要重写api变为空字符？

因为如果像我们那样配置好后，我们请求的实际路径会带上api，但我们发起请求的时候是不需要api的，所以要把他变成空字符。

2、在vue中使用proxy进行跨域的原理是：

将域名发送给本地的服务器（启动vue项目的服务,loclahost:8080），再由本地的服务器去请求真正的服务器。————————————————版权

本文链接地址:https://www.jiuchutong.com/zhishi/304769.html 转载请保留说明！

上一篇：discuz后台登陆地址是什么(discuz论坛无法登录)

下一篇：web前端开发规范(web前端开发规范有哪些)