关于vue-cli3中配置请求跨域的问题

根据Vue CLI3官方文档，

需要在vue.config.js文件中配置devServer.proxy选项来解决跨域问题。

1.关于vue.config.js文件

此文件在vue-cli3中不会自动生成，需要手动在项目根目录下创建。

2.配置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'}}}}
}

3.在发起请求时：

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来实现跨域的方法。

关于vue-cli3中配置请求跨域的问题相关推荐

【全栈项目上线（vue+node+mongodb）】06.nodejs服务上线（生产环境前后分离的vue项目中怎么解决跨域问题）...
以下操作使用下面项目为案例 https://github.com/itguide/vnshop ## 启动node服务克隆好项目后记得把依赖包安装好 npm i 使用 node 启动node服务 c ...
vue php axios 跨域,在vue项目中,使用axios跨域处理
下面我就为大家分享一篇在vue项目中,使用axios跨域处理,具有很好的参考价值,希望对大家有所帮助. 跨域,一个很是让人尴尬的问题,有些人可以在后台中设置请求头,但是很多前端并不具备后台的知识,并无 ...
vue php跨域,Vue 项目中遇到的跨域问题及解决方法(后台php)
问题描述前端 vue 框架,后台 php,百度跨域问题后台加这段代码 header("Access-Control-Allow-Origin: *"); 加了之后报这个错: Th ...
vue-cli4.x 中配置允许跨域请求
在项目根目录下创建vue.config.js文件: vue.config.js: module.exports = {devServer: {host: 'localhost',port: 8080, ...
解决uniapp调试过程中的请求跨域和环境配置
1. uniapp在前后台分离开发中,调试请求接口时,出现跨域问题. 2. 跨域原因:由于浏览器同源策略,即:端口号.域名.协议.IP地址必须一致,否则请求将被浏览器拦截. 3. 解决方法:服务器之 ...
解决vue项目中的前端跨域问题
什么是跨域正常情况下,我们使用ajax请求的数据都在自己的服务器上.但在一些特定的场景中,我们需要获取到别人的服务器上的数据,也就是在自己的服务器中的ajax要请求到别人的服务器的网址,这就是跨域. ...
jq中ajax请求跨域,用JQuery实现简单的Ajax跨域请求
前一阵发过一篇利用ExtJs的ScriptTagProxy实现Ajax跨域请求的文章,这几天看了一下Jquery,发现如果用JQuery中的getScript其实更简单(jquery 1.2.6版本) ...
jq中ajax请求跨域,jquery+ajax实现跨域请求的方法
本文实例讲述了jquery+ajax实现跨域请求的方法.分享给大家供大家参考.具体实现方法如下: 说明:这里的dataType 为 "jsonp" :type 只能为 GET ...
vue配置解决跨域问题
我们在使用vue时,经常要遇到跨域的问题,其实这个问题很好解决,只需我们在vue-cli中配置一下即可. 实现跨越请求: 在config文件夹下找到index.js proxyTable: {&quo ...

关于vue-cli3中配置请求跨域的问题

关于vue-cli3中配置请求跨域的问题

关于vue-cli3中配置请求跨域的问题相关推荐

最新文章

热门文章