vue跨域问题解决:Access to XMLHttpRequest at‘httplocalhost

  • vue跨域问题解决:Access to XMLHttpRequest at‘httplocalhost已关闭评论
  • 10 次浏览
  • A+
所属分类:Web前端
摘要

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

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

通过配置vue.config.js、proxy

实践解决跨域方法(基于封装好的axios,非原生)

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),再由本地的服务器去请求真正的服务器。
————————————————
版权声明:本文为CSDN博主「jahdgja」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/jahdgja/article/details/127858298