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正不正确
来源:https://segmentfault.com/a/1190000017905030
vue开发环境配置跨域,一步到位的更多相关文章
- Vue-cli proxyTable 解决开发环境的跨域问题
Vue-cli proxyTable 解决开发环境的跨域问题 proxyTable: { '/list': { target: 'http://api.xxxxxxxx.com', pathRewri ...
- 解决React前端在开发环境的跨域问题
在前后端分离的分布式架构中,跨域是一道无法绕过去的门槛,众所周知,生产环境上解决跨域最便捷的方式是使用Nginx来处理,那么,在本地开发环境又该如何处理呢? React框架里处理跨域问题,可以使用ht ...
- 前端vue开发中的跨域问题解决,以及nginx上线部署。(vue devServer与nginx)
前言 最近做的一个项目中使用了vue+springboot的前后端分离模式 在前端开发的的时候,使用vue cli3的devServer来解决跨域问题 上线部署则是用的nginx反向代理至后台服务所开 ...
- weex和vue开发环境配置详解(配置系统变量等等)
本文详细讲解如何搭建weex和vue开发环境 安装java 现在java安装包,网上的安装包都是国外的,很难下载下来 就用这个链接下载,亲测无毒,http://www.wmzhe.com/soft-3 ...
- VUE开发--环境配置(一)(转)
无剑_君关注 0.312019.05.09 11:53:43字数 1,073阅读 19,627 https://www.jianshu.com/p/a494417def99?utm_so ...
- 如何实现vue前端跨域,proxyTable解决开发环境前端跨域问题
在开发环境与后端调试的时候难免会遇到跨域问题,很多人说跨域交给后端解决就好了. 其实不然,前端也有很多方法可以解决跨域,方便也快捷. 常见的有nginx转发.node代理. 在vue项目中常用的是pr ...
- Vue的学习总结之---Vue项目 前后端分离模式解决开发环境的跨域问题
原文:https://blog.csdn.net/localhost_1314/article/details/83623526 在前后端分离的web开发中,我们与后台联调时,会遇到跨域的问题. 比如 ...
- vue proxyTable代理 解决开发环境的跨域问题
如果我们项目请求的地址为 htttp://xxxx.com/a/b/c 可以设置代理为: dev:{ assetsSubDirectory: 'static',// 静态资源文件夹 assetsPub ...
- Vue proxyTable 解决开发环境的跨域问题
在 config/index.js 配置文件中,添加 dev: { proxyTable: { '/ssp/withdraw': { target: 'http://dev.home.phiwifi. ...
随机推荐
- 软件构造实验二-拷贝一个c文件 将其中的关键字int替换成float
1,新建 Parser Generator 点击project --> new 2,填写工程名字 随意取一个名字 点击OK 3,点击Project选项下的 parserwizard 分析器向导选 ...
- Python学习日记(五)——初识函数(set、深浅拷贝、三目运算、函数、全局变量和局部变量)
基本数据类型补充 set set集合,是一个无序且不重复的元素集合 #创建 s = {11,22,33,44}#类似字典 s = set() #转换 l = (11,22,33,44) s1 = se ...
- Ubuntu下Nginx的安装和卸载
环境是Ubuntu 16.04 安装: sudo apt-get update sudo apt-get install nginx 卸载: sudo apt-get --purge remove n ...
- 如何构建自己的docker镜像
需求情况:springboot项目想要部署到docker里面,如何部署? 步骤如下: 1.将jar包上传linux服务器 /usr/local/dockerapp 目录,在jar包所在目录创建名为 D ...
- ccf 201803-3 URL映射(python)
使用正则表达式 import re import collections n, m = list(map(int, input().split())) arr = ['']*(m+n) for i i ...
- Linux系统下查找最近修改过的文件
Linux的终端上,没有windows的搜索那样好用的图形界面工具,但find命令确是很强大的. 比如按名字查找一个文件,可以用 find / -name targetfilename . 唉,如果只 ...
- Python Docstring 风格和写法学习
什么是Python Docstring 和Java类似,Python也通过注释形式的Docstring给程序.类.函数等建立文档.通过Docstring建立的文档不仅对人来说有更好的可读性,也能够让I ...
- mongodb 添加用户报错TypeError:db.addUser is not a function (mongodb3.4.1)
1:问题如下: 原因是 新版的MongoDB已经不支持addUser方法了. 改成createUser了. 使用方法如下 2:具体解释一下db.createUser()方法的用法 定义: 创 ...
- csv解析框架Windmill的一个demo
csv文件内容如下,第一行是文件头 解析代码如下: package com.xxx; import lombok.Data; import org.apache.commons.lang3.build ...
- JAVA 基础编程练习题27 【程序 27 求素数】
27 [程序 27 求素数] 题目:求 100 之内的素数 package cskaoyan; public class cskaoyan27 { @org.junit.Test public voi ...