原创力文档- 1、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。。
- 2、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
- 4、该文档为VIP文档，如果想要下载，成为VIP会员后，下载免费。
- 5、成为VIP后，下载本文档将扣除1次下载权益。下载后，不支持退款、换文档。如有疑问请联系我们。
- 6、成为VIP后，您将拥有八大权益，权益包括：VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 7、VIP文档为合作方或网友上传，每下载1次， 网站将根据用户上传文档的质量评分、类型等，对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
第
vue跨域问题:Access?to?XMLHttpRequest?at‘httplocalhost解决
目录前言一、背景补充（jsonp）二、实践解决跨域方法（基于封装好的axios，非原生）再补充一下原理：总结
前言
前两天遇到了跨域问题，报了AccesstoXMLHttpRequestathttplocalhost的错，在网上找了一些资料，我是通过配置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:http://（这里填你项目真实的后端地址）,
changOrigin:true,//是否开启跨域
pathRewrite:{
^/api://重写api，把api变成空字符，因为我们真正请求的路径是没有api的
}
也就是把vue.config.js配置成上图所示。
2、在axios.create的时候将baseURL设置为api，简单两步，就完成啦。
http.js（封装axios的那个文件）
importaxiosfromaxios
varhttp=axios.create({
baseURL:api,//把原来的项目地址，改成api，解决跨域问题
timeout:3000
})
我就是通过以上这两步，解决了我的跨域问题，希望给大家参考。
再补充一下原理：
1、为什么要重写api变为空字符？
因为如果像我们那样配置好后，我们请求的实际路径会带上api，但我们发起请求的时候是不需要api的，所以要把他变成空字符。
2、在vue中使用proxy进行跨域的原理是：
将域名发送给本地的服务器（启动vue项目的服务,loclahost:8080），再由本地的服务器去请求真正的服务器。
总结
文档评论（0）