关于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. 列举常见国内外做服务器与存储的IT厂家

    列举常见国内外做服务器与存储的IT厂家 联想.浪潮.曙光.同有飞骥.迪菲特.宝德.星盈.元谷.威联通.群晖.忆捷.天敏等 华为.华三.戴尔.神州云科.同有.谷数,都是比较大的厂商 HDS(昆仑联通). ...

  2. VS中常用C#代码段快速输入总结

    转自:https://blog.csdn.net/a980433875/article/details/12231673 Visual Studio 中有很多代码段都可以直接简写然后按TAB快速输入编 ...

  3. Python爬取前程无忧网站上python的招聘信息

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

  4. 2-How nginx processes a request

    原文:http://nginx.org/en/docs/http/request_processing.html server_name directive 参考:http://nginx.org/e ...

  5. DQL---条件查询、单行函数、多行函数、分组函数、数据类型

    一.DQL 1.基本规则: (1)对于日期型数据,做 *,/ 运算不合法,可以进行 +, - 运算.比如给日期加一天或减一个月,结果仍为一个日期.两个日期间只能为减法,返回两个日期相差的天数,两个日期 ...

  6. 多个浏览器下应用前端JS实现一键导出excel表

    自己试验了几种方法,找到一种较为全面的一种方式一键输出Excel表格,代码如下 <!DOCTYPE html> <html> <head lang="en&qu ...

  7. 微信小程序踩坑日记3——上传照片至服务器

    0. 引言 主要解决将小程序端获取的图片保存在服务器上.亲测可用的服务端脚本. 1. 获取照片 通过wx.chooseImage()方法,获取到图片,使用wx.uploadFile()上传图片. wx ...

  8. 使用 Vim 搭建 C/C++ 开发环境

    原文链接: https://spacevim.org/cn/use-vim-as-a-c-cpp-ide/ SpaceVim 是一个模块化的 Vim IDE,针对 C/C++ 语言的支持主要依靠 la ...

  9. 9.python3实用编程技巧进阶(四)

    4.1.如何读写csv数据 爬取豆瓣top250书籍 import requests import json import csv from bs4 import BeautifulSoup book ...

  10. SRDC - ORA-1555: Query Duration 0: Checklist of Evidence to Supply (Doc ID 1682704.1)

    SRDC - ORA-1555: Query Duration 0: Checklist of Evidence to Supply (Doc ID 1682704.1) Action Plan 1. ...