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.baseURL='/apis'
axios.get('/user') //访问/user就相当于访问 http://localhost:8080/apis/user

//例3
axios.baseURL='https://sbsb.com'
axios.get('/user') //访问/user就相当于访问 https://sbsb.com/user

//例4
axios.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.baseURL=apiConfig.baseURL
//axios的其他配置...

这样配置之后，打包部署到服务器上也不用再手工去除/apis

如果配置过程中出现了问题，自己调试，看看访问的url正不正确

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Django+Vue跨域环境配置详解

    概述 在使用Django+Vue开发过程中,遇到了很多开发环境相关的问题,比如跨域,比如ajax请求参数等,本篇文章主要记录解决在开发过程中,遇到的一些问题. 跨域不带Cookie 在使用Vue脚手架开发的过程中,会使用Vue脚手架自带的Server进行项目调试,Vue自带的Server支持 hot reloading ,这个特性是非常好用的.但是在开发过程中,因为要与后端交互,所以在请求后端接口的时候,会遇到跨域问题,这个问题在一些职责划分清楚的团队并不存在,因为前端开发人员会才用Mock数据

  • vue开发环境配置跨域的方法步骤

    本文要实现的是:使用vue-cli搭建的项目在开发时配置跨域,上线后不做任何任何修改,接口也可以访问 production:产品 生产环境 development:开发 开发环境 1.开发环境设置跨域使用工具: vue-cli自带的配置配置 目录 /config/index.js //自行复制黏贴 proxyTable: { '/apis':{ target: 'http://10.1.63.26:19080/', // 后台api changeOrigin: true, //是否跨域 // s

  • 利用Nginx处理Vue开发环境的跨域的方法

    1. 需求 本地测试域名与线上域名相同,以便正确传递 Cookie 和进行 SSO 测试. 注:由于 SSO 登录后,相关 Cookie 被加在四级域名上,因而需要做到本地测试域名和线上接口域名相同. 2. 方案 配置 Host 文件使线上域名指向 Localhost: 127.0.0.1 product.xxx.xxx.com 配置 Nginx 进行对应转发: server { listen 80; listen [::]:80; server_name ${product.xxx.xxx.c

  • vue使用vite配置跨域以及环境配置详解

    vue使用vite配置跨域以及环境配置详解

    目录 如何配置跨域,代理域名 区分开发环境和生产环境,以及预发布环境 可以做什么事 补充:解决跨域常用方法 一.VUE中常用proxy来解决跨域问题 二.JSONP解决跨域 三.CORS是跨域资源共享(Cross-Origin Resource Sharing),以 ajax 跨域请求资源,支持现代浏览器,IE支持10以上 四.iframe实现跨域 总结 如何配置跨域,代理域名 不管使用什么脚手架,配置代理都是绕不开的话题,下面是vite的代理 server: { proxy: { '/api'

  • vue-cli开发环境实现跨域请求的方法

    前端开发时,请求后台接口经常需要跨域,vue-cli实现跨域请求只需要打开config/index.js,修改如下内容即可. //例如要请求的接口url为http://172.3.2.1:8000/look/1 module.exports = { dev:{ proxyTable:{ '/api':{ target: 'http://172.3.2.1:8000', changeOrigin: true, pathRewrite: { '^/api': '' } } } } } 这时在你想请求

  • webpack4手动搭建Vue开发环境实现todoList项目的方法

    前言 平常在工作开发中,为了效率我们通常都会直接使用Vue-cli脚手架去搭建Vue开发环境,确实这种工具是节省了我们不少时间,但是你有没有想过Vue开发环境是如何搭建起来的?还有如果是你自己动手去搭建,能顺利搭建起来吗? 基于这些想法,我就捣鼓了一下webpack4,并且弄下来了这个小项目,感觉一个小项目下来收货还是挺大的,所以就写一遍文章,分享心得,哈哈!! 基于个人的时间精力问题,把本项目教程分为两部分: webpack4手动搭建Vue开发环境 (本篇文章) 手动搭建Vue项目文件夹实现t

  • Node中使用http-proxy-middleware实现代理跨域的方法步骤

    目录 1.安装代理模块 2.配置代理 1.安装代理模块 cnpm i http-proxy-middleware -S 2.配置代理 const express = require('express'); const app = express(); /* 代理配置 start */ const proxy = require('http-proxy-middleware'); //引入代理模块 const proxyOptions = { target: 'http://127.0.0.1:9

  • 详解Vue 开发模式下跨域问题

    设置请求头部 后端设置请求头部Access-Control-Allow-Credentials: true和Access-Control-Allow-Origin: www.xxx.com 前端post请求设置withCredentials=true 这里用了axios的请求数据方法代码如下: import axios from 'axios' import config from '../config' export default { request (method, uri, data,

  • 详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)

    在用vue做前端开发的时候,因为一般跑vue使用的webpack自带的node服务,而我们实际要使用的数据确是后台服务器上的,所以这就涉及到服务器请求跨域的问题.本来在诸如axios之类的网络请求参数里面配置 withCredentials: true, 就可以解决跨域问题的,但是现在浏览器比如chorme有做了新的跨域限制,比如要服务器端配置允许跨域才行,详见跨域问题解决,是英文的,看起来需要花点功夫:那有没有不需要服务器端配置就能解决浏览器的跨域问题的办法呢?答案肯定是有的!! 这里就说ch

  • Vue-cli proxyTable 解决开发环境的跨域问题详解

    和后端联调时总是会面对恼人的跨域问题,最近基于Vue开发项目时也遇到了这个问题,两边各自想了一堆办法,查了一堆资料,加了一堆参数,最后还得我把自己的localhost映射成上线时将要使用的域名. 今天翻看代码时,突然发现vue-cli的config文件里有一个参数叫proxyTable,看这个名字就感觉能解决问题,于是我就去搜了一下,果然.在vuejs-templates,也就是vue-cli的使用的模板插件里,有关于API proxy的说明,使用的就是这个参数. https://vuejs-t

  • Spring boot 和Vue开发中CORS跨域问题解决

    跨域资源共享CORS(Cross-origin Resource Sharing),是W3C的一个标准,允许浏览器向跨源的服务器发起XMLHttpRequest请求,克服ajax请求只能同源使用的限制.关于CORS的详细解读,可参考阮一峰大神的博客:跨域资源共享CORS详解. 1. 遇到的问题: 我用spring-boot 做Rest服务,Vue做前端框架,用了element-admin-ui这个框架做后台管理.在调试的过程中遇到了如下错误: Preflight response is not

随机推荐