前言
前两天遇到了跨域问题，报了Access to XM LHtt PR equest 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文件（如果没有该文件则自己创建）， 在P roxy中设置跨域，在proxy中设置要访问的地址，并重写/api为空的字符串。
vue.config.js
// const { define Config } = require('@vue/cli -s ervice')
//在vue中使用proxy进行跨域的原理是：
//将域名发送给本地的 服务器 （启动vue项目的服务,loclahost:8080），
//再由本地的服务器去请求真正的服务器。
module. export s = {
devServer:{
proxy:{
'/api':{//表示拦截以/api开头的请求路径
t arg et:'http://（这里填你项目真实的后端地址）',
changOri gin : true,// 是否 开启跨域
pat hr ewr IT e:{
'^/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），再由本地的服务器去请求真正的服务器。
总结
到此这篇关于vue跨域问题:Access to X ML HttpRequest at‘httplocalhost解决的 文章 就介绍到这了,更多相关vue跨域问题解决内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！
您可能感兴趣的文章: vue 处理跨域问题及解决方法小结 vue如何解决axios请求前端跨域问题 Vue如何解决跨域问题详解 Vue 项目中遇到的跨域问题及解决方法(后台php) vue代理和跨域问题的解决 Vue项目中跨域问题解决方案 vue解决跨域问题(推荐)
总结
以上是 为你收集整理的 vue跨域问题:Access to XMLHttpRequest at‘httplocalhost解决 全部内容，希望文章能够帮你解决 vue跨域问题:Access to XMLHttpRequest at‘httplocalhost解决 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于vue跨域问题:Access to XMLHttpRequest at‘httplocalhost解的详细内容...