vue如何配置服务器端跨域_vue开发环境配置跨域,一步到位
本文要实现的是:使用vue-cli搭建的项目在开发时配置跨域,上线后不做任何任何修改,接口也可以访问
阅读时间需要三分钟
production:产品 生产环境
development:开发 开发环境
1.开发环境设置跨域
使用工具:vue-cli自带的配置
配置目录 /config/index.js
//自行复制黏贴
proxyTable: {
'/apis':{
target: 'http://10.1.63.26:19080/', // 后台api
changeOrigin: true, //是否跨域
// secure: true,
pathRewrite: {
'^/apis': '' //需要rewrite的,
}
}
}
注意:以上配置只有在生产环境下有效,你打包之后就不起作用了
这样就存在一个问题,你的接口都是/apis开头的,打包之后部署到服务器要去除/apis,才能正常访问后台接口,如何解决呢?
2.生产环境设置跨域
使用工具 axios 中文文档地址
思路
解决的思路是这样的:
首先,axios的默认实例有一个baseURL的属性,配置了baseURL之后,你访问接口时就会自动带上
假设你vue-cli起了一个开发环境,地址为http://localhost:8080
//例1 当不设置baseURL时
axios.get('/user') //访问/user相当于访问 http://localhost:8080/user
//例2
axios.defaults.baseURL='/apis'
axios.get('/user') //访问/user就相当于访问 http://localhost:8080/apis/user
//例3
axios.defaults.baseURL='https://sbsb.com'
axios.get('/user') //访问/user就相当于访问 https://sbsb.com/user
//例4
axios.defaults.baseURL='https://sbsb.com/apis'
axios.get('/user') //访问/user就相当于访问 https://sbsb.com/apis/user
然后我们要根据现在的环境是开发环境还是生产环境,配置不同的baseURL
//判断是否是生产环境
var isPro = process.env.NODE_ENV === 'production' //process.env.NODE_ENV用于区分是生产环境还是开发环境
//配置不同的baseURL
module.exports = {
baseURL: isPro ? 'http://sbsb.com:8888/' : '/apis'
}
process.env.NODE_ENV用于区分是生产环境还是开发环境,这个值是webpack设置的
动手操作
假设后台api的rul是http://sbsb.com:8888/
首先在/config目录下新建一个文件,我这里叫api.config.js
写入以下代码
//判断是否是生产环境
var isPro = process.env.NODE_ENV === 'production' //process.env.NODE_ENV用于区分是生产环境还是开发环境
//根据环境不同导出不同的baseURL
module.exports = {
baseURL: isPro ? 'http://sbsb.com:8888/' : '/apis'
}
然后,在main.js中引入axios和刚才那个文件
//main.js
import Vue from 'vue'
import axios from 'axios'
import apiConfig from '../config/api.config.js'
axios.defaults.baseURL=apiConfig.baseURL
//axios的其他配置...
这样配置之后,打包部署到服务器上也不用再手工去除/apis
如果配置过程中出现了问题,自己调试,看看访问的url正不正确
vue如何配置服务器端跨域_vue开发环境配置跨域,一步到位相关推荐
- vue-cli2.x统一配置接口请求地址和开发环境的跨域代理
1.修改config/dev.env.js(开发环境的baseURL地址统一配置) 2.修改config/prod.env.js(线上环境的baseURL地址统一配置) 3.修改config/inde ...
- Vue+element+axios+tornado前后端一体化开发环境配置笔记
Vue+element+axios+tornado开发环境配置笔记 本系列文章由ex_net(张建波)编写,转载请注明出处. http://blog.csdn.net/ex_net/article/d ...
- java开发电脑配置_新电脑java开发环境配置(自用)
一.jdk下载 注:java8是长期支持版本,并且比较稳定.java13只有半年维护期,而且新发布的版本可能不稳定,不建议在正式项目中使用 2.下载时会提示需要登陆账号,注册一个即可(我的是qq邮箱, ...
- vue-cil解决开发环境的跨域问题
为什么会产生跨域问题 由于浏览器同源策略的限制,当前端项目运行的服务地址 和 接口服务运行的地址 协议 域名 端口 三者有一个不一致就会出现跨域 解决开发环境的跨域问题 ue-cli为我们在本地开启了 ...
- eclipse配置python开发环境_Python开发环境配置步骤
Python开发环境配置步骤 导语:Python开发环境配置,你懂吗?下面的是百分网小编为大家搜集的Python开发环境配置步骤,希望可以帮到你. 1:安装python2.7 python-2.7.3 ...
- Android开发环境配置简介
http://developer.51cto.com/art/200908/145145.htm 摘要:本文介绍了Android开发环境配置时需要了解的事项.Android开发环境目前只支持XP(32 ...
- Macbook Pro M1芯片Python开发环境配置
文章主要介绍M1 Mac新机器如何进行开发环境配置,由于在进行开发环境配置的时候,需要经常使用终端,而且新机器是没有配置homebrew的,后面一些操作不是很方便,所以本文将会对日常终端使用方面进行一 ...
- Vue整合nginx:(1)开发环境npm run dev下,通过nginx解决前后端分离造成的跨域问题
Vue整合nginx:(1)开发环境npm run dev下,通过nginx解决前后端分离造成的跨域问题 参考文章: (1)Vue整合nginx:(1)开发环境npm run dev下,通过nginx ...
- 如何实现vue前端跨域,proxyTable解决开发环境前端跨域问题
如何实现vue前端跨域,proxyTable解决开发环境前端跨域问题 参考文章: (1)如何实现vue前端跨域,proxyTable解决开发环境前端跨域问题 (2)https://www.cnblog ...
最新文章
- 回溯 Rust 2020:正成为最受欢迎的编程语言
- dataframe的重设index
- MFC类中获得其它类指针
- oracle alter_log,在线查看alter.log文件内容
- java set spliterator_Java HashSet spliterator() 方法
- logstash java插件_[logstash-input-log4j]插件使用详解
- 碎片︱R语言与深度学习
- c语言程序设计基础所有知识点,《C语言程序设计》基础知识点总结.doc
- java8配置环境变量_java8环境变量设置
- 自定义刻度尺进度条总结
- 关于高德地图的分析报告
- 第21节 ACL——控制路由器上接口大门的进出规则
- Shell一句话根据进程名杀死进程
- 好看有个性的网站技术导航网源码
- zabbix官网下载地址:https://sourceforge.net/projects/zabbix/files/ZABBIX Latest Stable/
- 非谓语动词---不定式作名词
- Layui数据表格分页参数详解
- Jasper(2)——简单使用导出PDF报表
- Python绘图Turtle库详解情人节玫瑰花
- 在windows系统写脚本,如何去掉回车换行符
热门文章
- 【Redis学习笔记】2018-05-30 Redis源码学习之Ziplist、Server
- Docker overlay网络互通
- ECMAScript5之JSON对象属性的遍历顺序
- Codeforces Round #367 (Div. 2)
- Microsoft Remote Desktop移动客户端QA
- 12.HTML编辑器(CKEditor、CKFinder集成)
- 【三个臭皮匠】第一次网络会议记录
- maven java 配置文件路径_Maven 的配置文件路径读取
- java phantomjd linux_linux安装phantomjs
- php仿攻击,PHP写的仿DDOS攻击程序代码