关于vue-cli3中配置请求跨域的问题
2024-10-19 16:31:19
关于vue-cli3中配置请求跨域的问题
根据Vue CLI3官方文档,
需要在vue.config.js
文件中配置devServer.proxy
选项来解决跨域问题。
关于
vue.config.js
文件此文件在vue-cli3中不会自动生成,需要手动在项目根目录下创建。
配置
devServer.proxy
选项以豆瓣的电影接口为例,进行如下配置。
proxy
中的/j/search_subjects
代表匹配api
的路径,当命中请求中的url
时进入这个代理,进行跨域请求;target
代表想要跨域的目标url
;changeOrigin
:true代表允许跨域;pathRewrite
:代表当匹配到上面的路径/j/search_subjects
时需要在target
后面拼接什么路径;
module.exports = {
devServer: {
proxy: {
'/j/search_subjects': {
target: 'https://movie.douban.com',
changeOrigin: true,
pathRewrite: {
'^/j/search_subjects': '/j/search_subjects'
}
}
}
}
}
- 在发起请求时:
this.axios.get("/j/search_subjects?type=movie&tag=%E7%83%AD%E9%97%A8&page_limit=5&page_start=0")
.then(response => {
console.log(responses);
})
可以看到,当在此发起get请求时,在上面的配置文件中匹配到了请求url中的“/j/search_subjects”,此时配置就会生效,把这个请求拼接到上面的target后面,请求不同域中远端的资源。
而此时打开浏览器开发者模式,通过network可以看到,
这个请求的路径显示为:http://localhost:8080/j/search_subjects?type=movie&tag=%E7%83%AD%E9%97%A8&page_limit=5&page_start=0
,
而实际请求的地址却是:https://movie.douban.com/j/search_subjects?type=movie&tag=%E7%83%AD%E9%97%A8&page_limit=5&page_start=0
这就是实际解决跨域的方式,通过把域名修改来达到跨域的目的,而实际访问的路径却是另一个域名的资源,这就是通过proxy来实现跨域的方法。
最新文章
- 图片轮播图插件的使用 unslider!!!
- Unable to install breakpoint in
- 理解RxJava:(四)Reactive Android
- IOS定位服务的应用
- Entity FrameWork初始化数据库的四种策略
- USB枚举过程(1)
- PAT-乙级-1018. 锤子剪刀布 (20)
- 【HeadFirst设计模式】12.复合模式
- python之面向对象(一)
- (原) Jquery 判断设备是PC端,还是移动端
- javaList容器中容易忽略的知识点
- 好用的开源库(二)——uCrop 图片裁剪
- 有两个序列A和B,A=(a1,a2,...,ak),B=(b1,b2,...,bk),A和B都按升序排列。对于1<;=i,j<;=k,求k个最小的(ai+bj)。要求算法尽量高效。
- ASP.NET MVC默认配置如有跳转到指定的Area区域中的对应程序中
- Hadoop多租户架构配置
- C++中浮点数比较大小,即小数比较大小
- Oracle 中的一些重要V$ 动态性能视图,系统视图和表
- Delphi 的多线程使用已经很简单了
- Nuget 下载过慢的解决办法
- Gitlab+Jenkins学习之路(一)之Git基础
热门文章
- 利用代码生成工具生成基于ABP框架的代码
- MySQL学习——查询表里的数据
- CSS3 动画--- CSS3 animation
- bower私服部署
- qt构建错误: dependent ";*.h"; does not exist.
- 简单两行,实现无线WiFi共享上网,手机抓包再也不用愁了
- iOS 高效的分页加载(TableView、CollectionView)
- printf打印字节调试
- 版本管理&#183;玩转git(日志查看与版本切换)
- WC 个人项目 ( node.js 实现 )