当前栏目
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:'http://(这里填你项目真实的后端地址)',
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),再由本地的服务器去请求真正的服务器。
相关文章
- TiDB Binlog 组件正式开源
- 使用Visual Studio Code对Node.js进行断点调试
- 推荐!数据可视化的十种优秀JavaScript图表库
- Node.js在复杂集成场景下占据统治地位的五个理由
- 玩转Node.js单元测试
- Node.js中内存泄漏分析
- Angular对React:一场关于Web开发者支持率的史诗对决
- 热点推荐:什么是后端开发?
- 谈谈Spring boot 启动层面的开发
- 使用NodeJS将文件或图像上传到服务器
- 编写React组件的最佳实践
- JavaScript MV*框架最值得关注的七个亮点
- 前端开发指南:如何利用PHP Cake框架构建应用
- 基于React与Vue后,移动开源项目Weex如何定义未来
- NodeJS和C++之间的类型转换
- jQuery中的常用到的三十九个技巧
- 官宣|Google Developers中国网站发布!
- NodeJS和C++之间的类型转换
- .NET Core首例Office开源跨平台组件(NPOI Core)
- 如何写出漂亮的React组件