VUE前端项目配置代理解决跨域问题
VUE前端项目配置代理解决跨域问题
问题如下,经常在本地调试接口出现这种问题
解决方式1:Chrome 的扩展插件
- 以前使用Chrome 的扩展插件,但是有时候还是会出现莫名其妙的问题。
- 需要梯子才行
Allow CORS: Access-Control-Allow-Origin
解决方式2:服务端配置跨域访问
- 也可以在服务端配置解决这个问题,这个要找后台协商。
- 很多开源的第三方库都做了处理,你在哪里调用都不会出现跨域问题。
解决方式3:前端项目配置本地代理
- 经过测试,这种方式通用性很强,不需要知道服务器有没有配置跨域,浏览器有没有装插件,都可以访问外部接口。
- Vue项目中
config/index.js
- Vue项目中
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'https://1.2.3.4:89', // 接口地址
changeOrigin: true, // 是否跨域
pathRewrite: { 、// 转发
'^/api': ''
},
secure: false
},
}
}
src/api/index.js
中如下配置baseURL
const debug = process.env.NODE_ENV !== 'production'
const axInstance = axios.create({
baseURL: debug ? 'api' : 'http://1.3.4.5.6:89',
timeout: 10000,
responseType: 'json',
withCredentials: false, // 表示跨域请求时是否需要使用凭证
headers: {
token: store.state.axios.token,
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
}
})
- 配置完毕后,运行项目,访问接口
http://0.0.0.0:8080/api/getinfo
就会被转发到https://1.2.3.4:89/getinfo
VUE前端项目配置代理解决跨域问题的更多相关文章
- 前端通过Nginx反向代理解决跨域问题
在前面写的一篇文章SpringMVC 跨域,我们探讨了什么是跨域问题以及SpringMVC怎么解决跨域问题,解决方式主要有如下三种方式: JSONP CORS WebSocket 可是这几种方式都是基 ...
- windows环境下 nginx+iis 反向代理解决跨域问题
项目基本完成,是时候花点时间整理一下最近的姿势了 1 什么是跨域? 网上对于跨域的概念会有大篇幅的文章去解释,似乎有点玄乎,初学者很容易对这个概念产生恐惧,跨域其实很简单,其实只要知道一点,无法跨域访 ...
- nginx反向代理解决跨域问题
跨域:浏览器从一个域名的网页去请求另一个域名的资源时,域名.端口.协议任一不同,都是跨域 . 下表格为前后端分离的域名,技术信息: 域名 服务器 使用技术 前端 http://b.yynf.com ...
- 配置CORS解决跨域调用—反思思考问题的方式
导读:最近都在用一套完整的Java EE的体系做系统,之前都是用spring框架,现在弄这个Java EE,觉得新鲜又刺激.但,由于之前没有过多的研究和使用,在应用的过程中,也出现了不少的问题.累积了 ...
- iis配置代理服务器解决跨域问题
iis配置代理服务器解决跨域问题 解决:在发布的项目根目录添加web.config配置文件 在配置文件中system.webServer节点中加入 <?xml version="1.0 ...
- vue项目配置及代理解决跨域
axios数据请求 1.下载模块:npm install axios 2.axios特点: 1.支持在浏览器当中发起XMLHttpRequest请求 2.支持Promise 3.自动转换json数据 ...
- 搞懂:前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理
什么是跨域 跨域:一个域下的文档或脚本试图去请求另一个域下的资源 广义的跨域包含一下内容: 1.资源跳转(链接跳转,重定向跳转,表单提交) 2.资源请求(内部的引用,脚本script,图片img,fr ...
- Nginx 反向代理解决跨域问题分析
当你遇到跨域问题,不要立刻就选择复制去尝试.请详细看完这篇文章再处理 .我相信它能帮到你. 分析前准备: 前端网站地址:http://localhost:8080 服务端网址:http://local ...
- Vue Springboot (包括后端解决跨域)实现登录验证码功能详细完整版
利用Hutool 基于Vue.ElementUI.Springboot (跨域)实现登录验证码功能 前言 一.Hutool是什么? 二.下面开始步入正题:使用步骤 1.先引入Hutool依赖 2.控制 ...
随机推荐
- coding++:JS数组去重的几种常见方法
一.简单的去重方法 // 最简单数组去重法 /* * 新建一新数组,遍历传入数组,值不在新数组就push进该新数组中 * IE8以下不支持数组的indexOf方法 * */ function uniq ...
- mongodb服务器启动
以配置文件启动服务器: mongod --config /usr/local/mongodata/config/mongodb.conf(配置文件路径) 客户端启动: mango 关闭mongodb的 ...
- SQL server 2008 简介
一.简介 网状模型 关系模型(独立表) 拆分成有主键的表.连接表即可. 工资与奖金有了依赖关系.所以可以不保存奖金,计算得出结果. 二. 1. 2.环境配置 安装iis服务 https://jingy ...
- 大数据篇:Hive
大数据篇:Hive hive.apache.org Hive是什么? Hive是Facebook开源的用于解决海量结构化日志的数据统计,是基于Hadoop的一个数据仓库工具,可以将结构化的数据文件映射 ...
- 从火车站车次公示栏来学Java读写锁
Java多线程并发之读写锁 本文主要内容:读写锁的理论:通过生活中例子来理解读写锁:读写锁的代码演示:读写锁总结.通过理论(总结)-例子-代码-然后再次总结,这四个步骤来让大家对读写锁的深刻理解. 本 ...
- API参数如何验证?别纠结,拿去用就是
今天我们主要分享项目实战中,另一种常用的参数校验框架 Hibernate Validator,请准备好小板凳,我们的分享开始. 1. 是啥? 先抛一张图,锻炼一下你的观察力. 通过上图有没有发现,数据 ...
- 多线程学习笔记(五)---- 在JDK文档的使用
1.前言 我们经常在JDK文档中见到一些类上的介绍说,该类是"安全的"."不安全"."效率高"."效率低"的词眼.这里, ...
- eclipse导入项目乱码问题及快键键收集
1.eclipse导入的项目出现乱码,选择该项目,右键选择最下方的Properties,第一个出现的Resource页面: 在Text file encoding项中,选择other. 目前中文编码主 ...
- JavaScript 进阶入门
17:56:11 2019-08-09 如题所见 还是入门 23:10:17 2019-08-11 继续学习 16:34:59 2019-08-14 虽然入了门 但还是缺少实践 本文资料来源: 慕课网 ...
- Shell:Day09-2.笔记
4.模式匹配(地址定界) 1.空值,没有定义,默认就将文件中所有的行,放入awk进行循环 2.对固定的 1,3 行进行操作 sed -n '1,3p' /etc/passwd awk '1,3 ...