VUE前端项目配置代理解决跨域问题

问题如下,经常在本地调试接口出现这种问题

解决方式1:Chrome 的扩展插件

  • 以前使用Chrome 的扩展插件,但是有时候还是会出现莫名其妙的问题。
  • 需要梯子才行 Allow CORS: Access-Control-Allow-Origin

解决方式2:服务端配置跨域访问

  • 也可以在服务端配置解决这个问题,这个要找后台协商。
  • 很多开源的第三方库都做了处理,你在哪里调用都不会出现跨域问题。

解决方式3:前端项目配置本地代理

  • 经过测试,这种方式通用性很强,不需要知道服务器有没有配置跨域,浏览器有没有装插件,都可以访问外部接口。
    1. Vue项目中 config/index.js
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'https://1.2.3.4:89', // 接口地址
changeOrigin: true, // 是否跨域
pathRewrite: { 、// 转发
'^/api': ''
},
secure: false
},
}
}
    1. 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前端项目配置代理解决跨域问题的更多相关文章

  1. 前端通过Nginx反向代理解决跨域问题

    在前面写的一篇文章SpringMVC 跨域,我们探讨了什么是跨域问题以及SpringMVC怎么解决跨域问题,解决方式主要有如下三种方式: JSONP CORS WebSocket 可是这几种方式都是基 ...

  2. windows环境下 nginx+iis 反向代理解决跨域问题

    项目基本完成,是时候花点时间整理一下最近的姿势了 1 什么是跨域? 网上对于跨域的概念会有大篇幅的文章去解释,似乎有点玄乎,初学者很容易对这个概念产生恐惧,跨域其实很简单,其实只要知道一点,无法跨域访 ...

  3. nginx反向代理解决跨域问题

    跨域:浏览器从一个域名的网页去请求另一个域名的资源时,域名.端口.协议任一不同,都是跨域 . 下表格为前后端分离的域名,技术信息:   域名 服务器 使用技术 前端 http://b.yynf.com ...

  4. 配置CORS解决跨域调用—反思思考问题的方式

    导读:最近都在用一套完整的Java EE的体系做系统,之前都是用spring框架,现在弄这个Java EE,觉得新鲜又刺激.但,由于之前没有过多的研究和使用,在应用的过程中,也出现了不少的问题.累积了 ...

  5. iis配置代理服务器解决跨域问题

    iis配置代理服务器解决跨域问题 解决:在发布的项目根目录添加web.config配置文件 在配置文件中system.webServer节点中加入 <?xml version="1.0 ...

  6. vue项目配置及代理解决跨域

    axios数据请求 1.下载模块:npm install axios 2.axios特点: 1.支持在浏览器当中发起XMLHttpRequest请求 2.支持Promise 3.自动转换json数据 ...

  7. 搞懂:前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理

    什么是跨域 跨域:一个域下的文档或脚本试图去请求另一个域下的资源 广义的跨域包含一下内容: 1.资源跳转(链接跳转,重定向跳转,表单提交) 2.资源请求(内部的引用,脚本script,图片img,fr ...

  8. Nginx 反向代理解决跨域问题分析

    当你遇到跨域问题,不要立刻就选择复制去尝试.请详细看完这篇文章再处理 .我相信它能帮到你. 分析前准备: 前端网站地址:http://localhost:8080 服务端网址:http://local ...

  9. Vue Springboot (包括后端解决跨域)实现登录验证码功能详细完整版

    利用Hutool 基于Vue.ElementUI.Springboot (跨域)实现登录验证码功能 前言 一.Hutool是什么? 二.下面开始步入正题:使用步骤 1.先引入Hutool依赖 2.控制 ...

随机推荐

  1. coding++:JS数组去重的几种常见方法

    一.简单的去重方法 // 最简单数组去重法 /* * 新建一新数组,遍历传入数组,值不在新数组就push进该新数组中 * IE8以下不支持数组的indexOf方法 * */ function uniq ...

  2. mongodb服务器启动

    以配置文件启动服务器: mongod --config /usr/local/mongodata/config/mongodb.conf(配置文件路径) 客户端启动: mango 关闭mongodb的 ...

  3. SQL server 2008 简介

    一.简介 网状模型 关系模型(独立表) 拆分成有主键的表.连接表即可. 工资与奖金有了依赖关系.所以可以不保存奖金,计算得出结果. 二. 1. 2.环境配置 安装iis服务 https://jingy ...

  4. 大数据篇:Hive

    大数据篇:Hive hive.apache.org Hive是什么? Hive是Facebook开源的用于解决海量结构化日志的数据统计,是基于Hadoop的一个数据仓库工具,可以将结构化的数据文件映射 ...

  5. 从火车站车次公示栏来学Java读写锁

    Java多线程并发之读写锁 本文主要内容:读写锁的理论:通过生活中例子来理解读写锁:读写锁的代码演示:读写锁总结.通过理论(总结)-例子-代码-然后再次总结,这四个步骤来让大家对读写锁的深刻理解. 本 ...

  6. API参数如何验证?别纠结,拿去用就是

    今天我们主要分享项目实战中,另一种常用的参数校验框架 Hibernate Validator,请准备好小板凳,我们的分享开始. 1. 是啥? 先抛一张图,锻炼一下你的观察力. 通过上图有没有发现,数据 ...

  7. 多线程学习笔记(五)---- 在JDK文档的使用

    1.前言 我们经常在JDK文档中见到一些类上的介绍说,该类是"安全的"."不安全"."效率高"."效率低"的词眼.这里, ...

  8. eclipse导入项目乱码问题及快键键收集

    1.eclipse导入的项目出现乱码,选择该项目,右键选择最下方的Properties,第一个出现的Resource页面: 在Text file encoding项中,选择other. 目前中文编码主 ...

  9. JavaScript 进阶入门

    17:56:11 2019-08-09 如题所见 还是入门 23:10:17 2019-08-11 继续学习 16:34:59 2019-08-14 虽然入了门 但还是缺少实践 本文资料来源: 慕课网 ...

  10. Shell:Day09-2.笔记

    4.模式匹配(地址定界)  1.空值,没有定义,默认就将文件中所有的行,放入awk进行循环  2.对固定的 1,3 行进行操作  sed -n '1,3p' /etc/passwd  awk '1,3 ...