一、开发环境中跨域

使用 Vue-cli 创建的项目,开发地址是 localhost:8080,需要访问非本机上的接口http://10.1.0.34:8000/queryRole。不同域名之间的访问,需要跨域才能正确请求。跨域的方法很多,通常都需要后台配置,不过 Vue-cli 创建的项目,可以直接利用 Node.js 代理服务器,通过修改vue proxyTable接口实现跨域请求。在vue-cli项目中的config文件夹下的index.js配置文件中,修改前的dev:

dev: {
env: require('./dev.env'),
port: 8080,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
cssSourceMap: false
}

只要修改里面的proxyTable: {}项

dev: {

    // 静态资源文件夹
assetsSubDirectory: 'static', // 发布路径
assetsPublicPath: '/', // 代理配置表,在这里可以配置特定的请求代理到对应的API接口
// 例如将'localhost:8080/api/xxx'代理到'www.example.com/api/xxx'
// 使用方法:https://vuejs-templates.github.io/webpack/proxy.html
proxyTable: {
'/api': {
target: 'http://xxxxxx.com', // 接口的域名
// secure: false, // 如果是https接口,需要配置这个参数
changeOrigin: true, // 如果接口跨域,需要进行这个参数配置,为true的话,请求的header将会设置为匹配目标服务器的规则(Access-Control-Allow-Origin)
  pathRewrite: { '^/api': '' //本身的接口地址没有 '/api' 这种通用前缀,所以要rewrite,如果本身有则去掉 
 } } }, // 本地访问 http://localhost:8080 host: 'localhost', // can be overwritten by process.env.HOST

然后重启项目npm run dev

注意:

接口地址原本是 /save/index,但是为了匹配代理地址,在前面加一个 /api,  因此接口地址需要写成这样的即可生效 /api/save/index。

'/api' 为匹配项,target 为被请求的地址,因为在 ajax 的 url 中加了前缀 '/api',而原本的接口是没有这个前缀的,所以需要通过 pathRewrite 来重写地址,将前缀 '/api' 转为 '/'。如果本身的接口地址就有 '/api' 这种通用前缀,就可以把 pathRewrite 删掉。

1、参数proxyTable详解:

vue-cli的config文件里的参数:proxyTable,这个参数主要是一个地址映射表,你可以通过设置将复杂的url简化,例如我们要请求的地址是api.xxxxxxxx.com/list/1,可以按照如下设置:

proxyTable: {
'/list': {
target: 'http://api.xxxxxxxx.com',
pathRewrite: {
'^/list': '/list'
}
}
}

这样我们在写url的时候,只用写成/list/1就可以代表api.xxxxxxxx.com/list/1.
那么又是如何解决跨域问题的呢?其实在上面的'list'的参数里有一个changeOrigin参数,接收一个布尔值,如果设置为true,那么本地会虚拟一个服务端接收你的请求并代你发送该请求,这样就不会有跨域问题了,当然这只适用于开发环境。增加的代码如下所示:

proxyTable: {
'/list': {
target: 'http://api.xxxxxxxx.com',
changeOrigin: true,
pathRewrite: {
'^/list': '/list'
}
}
}

vue-cli的这个设置来自于其使用的插件http-proxy-middleware

github:https://github.com/chimurai/http-proxy-middleware

深入了解的话可以看该插件配置说明,似乎还支持websocket,很强大的插件。

2、pathRewrite含义:

用代理,首先你得有一个标识,告诉他你这个连接要用代理,不然的话,可能你的 html,css,js这些静态资源都跑去代理。所以我们只要接口用代理,静态文件用本地。'/iclient': {}, 就是告诉node,我接口只要是'/iclient'开头的才用代理。所以你的接口就要这么写 /iclient/xx/xx。最后代理的路径就是 http://xxx.xx.com/iclient/xx/xx。可是不对啊,我正确的接口路径里面没有/iclient啊,所以就需要pathRewrite,'^/iclient':'', 把'/iclient'去掉,这样既能有正确标识,又能在请求接口的时候去掉iclient。当然如果本身的接口中就有/iclient,那么就可以把pathRewrite这个参数去掉。

二、在生产环境中跨域

设置nginx配置文件:

location /api {
add_header 'Access-Control-Allow-Origin' '*';
proxy_pass http://fanyi.baidu.com/v2transapi;
}

三、设置不同的接口地址

  平常我们团队开发时都在公司的局域网内,调用接口也是局域网内部的,但是项目上线时,请求接口是线上服务器端的,那么就有接口之间的来回切换问题。

  在使用vue-cli搭建项目以后,做相关配置就可以实现,不用手动更改接口路径,也可以请求不同环境下的接口。

  1、设置不同的接口地址

  先找到以下文件

  /config/dev.env.js

  /config/prod.env.js

  可以看到dev.env.js里面内容如下

这是生产环境的参数配置,然后我们可以再上面文件加入一行代码,如下:这就是本地测试环境请求后台接口的域名

然后找到prod.env.js文件,如下:

我们加入一行代码,如下:这是我们上传服务器以后,请求后台接口的域名

2、在代码中调用设置好的参数:

比如我在本项目中重新封装axios(api文件在/src/api/index.js中),将配置好的接口地址作为baseURL拼接到接口路径中,应用参数部分如下:

最后重新启动项目就可以了,当npm run dev的时候就运行在生产环境,当npm run build的时候就是正式的线上环境。

 后端程序代理

有一种方法不需要后端的配合和修改服务器配置 ,我们自己就可以做到。就是我们自己启一个后端程序做代理。然后把所有的请求转发到服务器。这里要用到node的一个包http-proxy-middleware。关键代码(express)如下

解决vue-cli项目开发中跨域问题的更多相关文章

  1. vue cli本地开发跨域问题解决

    首先呢,找到在目录里找到config文件夹 然后修改config文件夹下的index.js里面dev的配置项proxyTable: 修改为: proxyTable: { '/api': { targe ...

  2. 改造@vue/cli项目为服务端渲染-ServerSideRender

    VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服 ...

  3. Vue.之.项目开发工具选用

    Vue.之.项目开发工具选用 上篇文章记录了创建项目,这篇文件记录,如何对创建的项目进行开发.这里选择一个工具:Visual Studio Code (请自行下载安装) 1. 打开VSCode工具,并 ...

  4. 解决@vue/cli 创建项目是安装chromedriver时失败的问题

    最近在使用新版vue的命令行工具创建项目时,安装chromedriver老是失败,导致后面的步骤也没有进行.网上搜索了一下,全是使用 工作中常见问题汇总及解决方案 npm install chrome ...

  5. python web开发中跨域问题的解决思路

    线上环境不存在跨域问题,nginx转发 解决思路: 1.什么是跨域 在浏览器窗口中,和某个服务端通过某个 “协议+域名+端口号” 建立了会话的前提下,去使用与这三个属性任意一个不同的源提交了请求,那么 ...

  6. Vue CLI 3开发中屏蔽的EsLint错误 (.eslintrc.js 在vue3+中 修改这个)

    1.关闭eslint校验有了eslint的校验,可以来规范开发人员的代码,是挺好的.但是有些像缩进.空格.空白行之类的规范,在开发过程中一直报错,未免太过于苛刻了.所以,我还是会选择关闭eslint校 ...

  7. Vue 实战项目开发流程

    一 基础配备 ## 一.环境搭建 #### 1.安装node - 去[官网](https://nodejs.org/zh-cn/)下载node安装包 - 傻瓜式安装 - 万一安装后终端没有node环境 ...

  8. 第四篇:Vue的项目开发

    安装Vue的脚手架cli环境 1)官网下载并安装node,附带npm https://nodejs.org/zh-cn/ node环境: 可以解释执行js语言 提供了npm应用商城,可以为node环境 ...

  9. Vue(项目踩坑)_解决vue中axios请求跨域的问题

    一.前言 今天在做项目的时候发现axios不能请求跨域接口 二.主要内容 1.之前直接用get方式请求聚合数据里的接口报错如下 2.当前请求的代码 3.解决方法 (1)在项目目录中依次找到:confi ...

随机推荐

  1. maven本地仓库已经有了所需的jar包,为什么还要去请求远程仓库

    问题 IDEA 中的maven 项目,一个jar包一直导入不进来,reimport 无效.从另一仓库把这个jar包拷贝到当前仓库,还是无效.mvn clean install -e U 发现加载这个j ...

  2. 通过mitmproxy爬取APP的数据

    安装: https://mitmproxy.org/ 小米安装证书 设置->系统安全->从存储设备安装->选择*.pem文件 模拟器安装证书 (请从C:\Users\John\.mi ...

  3. 本地快速搭建MarkDown语法网站

    主要是在之前跟人学的快速搭建一个简单的网站,可以通过这样的方式把相关的文档美美的放在服务器上,然后给别人看也好,自己也能熟系熟系MarkDown的语法并学习,要是接口文档还是推荐通过swagger去实 ...

  4. 011-Spring aop 002-核心说明-切点PointCut、通知Advice、切面Advisor

    一.概述 切点Pointcut,切点代表了一个关于目标函数的过滤规则,后续的通知是基于切点来跟目标函数关联起来的. 然后要围绕该切点定义一系列的通知Advice,如@Before.@After.@Af ...

  5. 【jmeter】使用csv文件生成用户名和密码列表

    介绍 在[jmeter]使用jmeter进行测试-示例 中介绍了jmeter的基本使用,本文将介绍如何使用csv文件生成多个用户名. 应用场景 实际测试中,经常需要模拟多个用户进行负载测试,而用户名和 ...

  6. 最新sublime3配C++11编译环境

    sublime text 3. version 3.2.1 build 3207 Package control: install package : C++11 (v0.0.9; github.co ...

  7. Docker网络模式介绍

    一.概述 docker的网络驱动有很多种方式,按照docker官网给出的网络解决方案就有6种,分别是:bridge.host.overlay.macvlan.none.Network plugins, ...

  8. mac ffmpeg mediainfo视频压缩

    最近在开发官网,官网上放了一些视频,但是本宝宝拿到的都是100多.200多.300多兆的原视频,怎么把他们变成统统20兆呢?宝宝用了如下方法,很好用哟- 1.安装视频压缩工具下载ffmpeg brew ...

  9. Mysql update多表联合更新

    下面我建两个表,并执行一系列sql语句,仔细观察sql执行后表中数据的变化,很容易就能理解多表联合更新的用法 student表                                      ...

  10. Python Tkinter的学习

    Tkinter模块("Tk 接口")是Python的标准Tk GUI工具包的接口.Tk和Tkinter可以在大多数的Unix平台下使用,同样可以应用在Windows和Macinto ...