关于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'
}
}
}
}
}
  1. 在发起请求时:
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中配置请求跨域的问题的更多相关文章

  1. Vue(项目踩坑)_解决vue中axios请求跨域的问题

    一.前言 今天在做项目的时候发现axios不能请求跨域接口 二.主要内容 1.之前直接用get方式请求聚合数据里的接口报错如下 2.当前请求的代码 3.解决方法 (1)在项目目录中依次找到:confi ...

  2. django中配置允许跨域请求

    对于django 安装django-cors-headers,详情请看官方文档 pip install django-cors-headers 配置settings.py文件 a.在INSTALLED ...

  3. Vue 项目中遇到的跨域问题及解决方法

    原文:https://www.jb51.net/article/137278.htm 问题描述 前端 vue 框架,跨域问题后台加这段代码 header("Access-Control-Al ...

  4. reactjs中配置代理跨域

    第一步,下载依赖 http-proxy-middleware yarn add http-proxy-middleware 第二步,在src下建立setupProxy.js const proxy = ...

  5. UEditor 中配置可以跨域访问的图片路径

    文档里很清楚:http://fex.baidu.com/ueditor/#server-path 进入配置文件 当域名不是直接配置到项目根目录时,例:http://a.com/b/c  域名下有两文件 ...

  6. 并发编程概述 委托(delegate) 事件(event) .net core 2.0 event bus 一个简单的基于内存事件总线实现 .net core 基于NPOI 的excel导出类,支持自定义导出哪些字段 基于Ace Admin 的菜单栏实现 第五节:SignalR大杂烩(与MVC融合、全局的几个配置、跨域的应用、C/S程序充当Client和Server)

    并发编程概述   前言 说实话,在我软件开发的头两年几乎不考虑并发编程,请求与响应把业务逻辑尽快完成一个星期的任务能两天完成绝不拖三天(剩下时间各种浪),根本不会考虑性能问题(能接受范围内).但随着工 ...

  7. 第五节:SignalR大杂烩(与MVC融合、全局的几个配置、跨域的应用、C/S程序充当Client和Server)

    一. 说在前面的话 本节主要在前面章节的基础上补充了几个简单的知识点,比如:第三方调用通过 GlobalHost.ConnectionManager.GetHubContext<MySpecHu ...

  8. 在ABP的Web层中实现复杂请求跨域访问

    在最近的项目中,后端使用ABP,前端采用React,前后端完全分离.其中大部分接口都通过WebApi层调用,项目中未使用Session.但最后在添加一个网站的验证码验证留言功能时,使用了Session ...

  9. 解决Django+Vue前后端分离的跨域问题及关闭csrf验证

      前后端分离难免要接触到跨域问题,跨域的相关知识请参:跨域问题,解决之道   在Django和Vue前后端分离的时候也会遇到跨域的问题,因为刚刚接触Django还不太了解,今天花了好长的时间,查阅了 ...

随机推荐

  1. windows server 2008 r2 安装 vs2017 无法进入安装界面问题解决方法

    在 windows server 2008 r2 版本操作系统上安装 vs2017 经常出现下载进度条结束后没有任何反应问题,一般是因为安装程序兼容性造成的,解决方案如下: 将 C:\Program ...

  2. 用 Python 带你看各国 GDP 变迁

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 周萝卜 源自:萝卜大杂烩 PS:如有需要Python学习资料的小伙伴 ...

  3. 基于swoole实现多人聊天室

    核心的swoole代码 基本的cs(client-sercer)结构不变,这里利用的是redis的哈希和set来储存和分组;从而达到了分组,统计,定时推送等功能;最后利用onclose事件来剔除断开的 ...

  4. Unity Pixel 人物设计(1)

    草稿: 目前进度:

  5. DDCTF 2019 部分WP

    WEB 滴~ http://117.51.150.246/index.php?jpg=TmpZMlF6WXhOamN5UlRaQk56QTJOdz09 观察链接可发现jpg的值是文件名转hex再bas ...

  6. swift个人总结

    最近iOS10 已经开始正式使用,研究使用了swift3.0,将一些总结记录于此,以便以后查阅.持续更新中. swift中一般将一些功能相近的方法写在同一个延展中,便于代码的规范,找起来也方便.区别o ...

  7. DOJO之gridx

    GridX简介 Gridx是IBM公司的职员对Dojo中的Grid进行进一步扩展的组件,但是它是重新开发了Grid而不是继承Grid. 虽然同样都是基于Dojo store, 但与DataGrid/E ...

  8. 基于socketsever下实现的FTP

    # ### 客户端client import socket import json import struct import os sk = socket.socket() sk.connect( ( ...

  9. 7. Vue - 组件

    一.组件分类 1. 定义 ​ 组件是可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义元素.特点为:代码重用,提高开发效率,让网页结构更清晰. 2. 局部组件 ​ 只能在定义它的el中 ...

  10. UML图示样例