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

admin管理员组

文章数量:1794759

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

前两天遇到了跨域问题，报了Access to XMLHttpRequest at‘httplocalhost的错，在网上找了一些资料，我是通过配置vue.config.js、proxy实现的，感觉非常方便，分享给大家！

一、背景补充（jsonp）

首先，来个背景，为什么会出现跨域？--（先了解一下另一种jsonp，我用的不是这种方法，但怎么说呢，比如面试，多了解几种方法总是好的，jsonp就不贴具体方法了，因为我这次没试）

因为浏览器有同源策略（补充：协议、域名、端口相同是同源， 同源策略限制： 1、js脚本不能访问另一个域下的cookie、localstorage 2、不能操作另一个域dom 3、ajax不能跨域请求 也就是限制不同源的资源交互，不能跨域访问，但是在一个页面中引入不同域的js却可以自由访问，例如img这个标签，基于这个原理jsonp出现。 jsonp和json没关系，json是数据交换格式，jsonp是非官方数据传输协议。 怎么实现，前端传callback参数，后端用这个参数的值作为函数名称包裹json数据，这样给前端的就是js代码了。二、实践解决跨域方法（基于封装好的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:'（这里填你项目真实的后端地址）', changOrigin: true,//是否开启跨域 pathRewrite:{ '^/api':'' //重写api，把api变成空字符，因为我们真正请求的路径是没有api的 } } } } }

也就是把vue.config.js配置成上图所示。

2、在axios.create的时候将baseURL设置为api ，简单两步，就完成啦。

http.js（封装axios的那个文件） import axios from 'axios' var http=axios.create({ baseURL:'api',//把原来的项目地址，改成api，解决跨域问题 timeout:3000 })

我就是通过以上这两步，解决了我的跨域问题，希望给大家参考。

再补充一下原理：

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

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

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

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

本文标签： AccessVuehttplocalhostXMLHttpRequest