vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' header is present on the requested resource.” 这种跨域错误。
要想本地正常的调试,解决的办法有三个:
一、关闭谷歌浏览器的同源策略,这样就不存在跨域问题了。
window
- 新建一个 chrome.exe 的快捷方式, 并且关闭所有的chrome浏览器
- 设置参数,关闭 同源策略
--args --disable-web-security
- 打开chrome浏览器之后效果如下
mac
//chrome 浏览器
open -a "Google Chrome" --args --disable-web-security --user-data-dir
//safari 浏览器
open -a '/Applications/Safari.app' --args --disable-web-security --user-data-dir
linux
chromium-browser --disable-web-security
二、使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建)
例如请求的url:“http://l-test12.dev.cn2.corp.agrant.cn:8080/api/auth/login”
1、打开config/index.js,在proxyTable中添写如下代码:
proxyTable: {
'/newretail': {
target: 'http://l-test12.dev.cn2.corp.agrant.cn:8080', //源地址
changeOrigin: true, //改变源
pathRewrite: {
'^/newretail': 'http://l-test12.dev.cn2.corp.agrant.cn:8080' //路径重写}}
}
这样就可以啦,
使用axios请求数据时直接使用‘/newretail’
getData () {
axios.get('/newretail/api/auth/login', function (res) {//实际请求的是“http://l-test12.dev.cn2.corp.agrant.cn:8080/api/auth/login”
console.log(res)
})
}
2.由于这个代理其实就是在本地起个node服务,相当于在本地起个后台,然后localhose8080,例如你在你电脑上开发,你页面的请求是发送给本地的node的,然后你node再去发送请求到测试环境,所以你把代码部署到线上跟测试服务器上的时候,代理其实就不起作用了,那么按照上面的写法实际请求的其实就是'/newretail/api/auth/login',所以我们用axios封装请求的时候需要判断一下:
let baseURL const env = process.env.NODE_ENV//node的api,用来判断当前处于什么环境 switch (env) {
case 'development':
baseURL = ''
break
case 'test':
baseURL = 'http://l-test12.dev.cn2.corp.agrant.cn:8080'
break
case 'production':
baseURL = 'http://webapi.prod.qd1.corp.agrant.cn:8080'
break
} export { baseURL }
或者
let serverUrl = '/newretail/' //本地调试时
// let serverUrl = 'http://l-test12.dev.cn2.corp.agrant.cn:8080/' //打包部署上线时
export default {
dataUrl: serverUrl + 'api/auth/login'
}
扩展
命令行执行的文件(我这个是配置多个跨域地址,使用命令启动不同的跨域地址)
process.argv
属性返回一个数组,这个数组包含了启动Node.js进程时的命令行参数。第一个元素为process.execPath
。如果需要获取argv[0]
的值请参见node文档的 process.argv0
。第二个元素为当前执行的JavaScript文件路径。剩余的元素为其他命令行参数。(主要获取命令行参数)
proxyTable: {
vue项目开发时怎么解决跨域的更多相关文章
-
vue项目配置及代理解决跨域
axios数据请求 1.下载模块:npm install axios 2.axios特点: 1.支持在浏览器当中发起XMLHttpRequest请求 2.支持Promise 3.自动转换json数据 ...
-
使用vue-element-admin框架开发时遇到的跨域问题
之前 使用js和jquery开发时也碰到过接口请求时的跨域问题, 但是在使用vue-element-admin开发也碰到这个问题,而且不能使用之前的方法解决,查过不少资料,找到一个很好的方法解决了这个 ...
-
Vue Springboot (包括后端解决跨域)实现登录验证码功能详细完整版
利用Hutool 基于Vue.ElementUI.Springboot (跨域)实现登录验证码功能 前言 一.Hutool是什么? 二.下面开始步入正题:使用步骤 1.先引入Hutool依赖 2.控制 ...
-
Vue学习笔记-django-cors-headers安装解决跨域问题
一 使用环境: windows 7 64位操作系统 二 jango-cors-headers安装解决跨域问题(后端解决方案) 跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的 ...
-
VUE在开发环境下实现跨域
1. 跨域设置 VUE项目的 config文件夹下index.js文件中修改 dev: proxyTable中的内容(默认是没有内容的): 添加内容: '/list': { target: 'http ...
-
vue项目里面使用脚手架实现跨域
今天在做vue项目的时候,项目在本地,接口数据在阿里云,这就造成了跨域,在网上找了好久,网上大部分的方法都是找到config文件夹下面的index进行修改的,可是我找到的Index却和他们描述的不一样 ...
-
vue2.0开发环境下解决跨域问题
1.找到vue 项目下的配置文件 /config/index.js 2.找到 proxyTable 配置项 proxyTable: { '/api': { target: 'http://www.xx ...
-
【Vue】记录一个之前解决跨域问题
proxyTable: { "/proxy/": {//以/proxy/为开头的适合这个规则 target: "http://192.168.7.72:8000" ...
-
vue-cli开发时,ajax跨域详细解决办法
在config/index.js中进行如下配置 [即在进行ajax请求时,地址中任何以/api开头的请求地址都被解析为目标地址,target就是你想要的后台接口地址] proxyTable: { '/ ...
随机推荐
-
单调队列优化DP,多重背包
单调队列优化DP:http://www.cnblogs.com/ka200812/archive/2012/07/11/2585950.html 单调队列优化多重背包:http://blog.csdn ...
-
Android js相互调用
一.webview相当于android中的浏览器,基于webkit开发,可以浏览网页文件,支持css javas cript 以及html webview.getSettings().setJavaS ...
-
CentOS6.5菜鸟之旅:VirtualBox4.3识别USB设备
一.前言 VirtualBox默认是不能识别USB设备的,但可以通过Oracle VM VirtualBox Extension Pack来增强VirtualBox的功能,增强的功能如下: 1. US ...
-
【wikioi】1690 开关灯(线段树)
http://wikioi.com/problem/1690/ 这题可不能算是水题了.. 在线段树中,我只想到了lazy改变,但是没想到lazy变后size怎么变,我的策略变成了lazy为0时size ...
-
C编程实现2的1000次方(使程序中的n=1000即可)
#include<stdio.h> #include<malloc.h> void double_(int n) { ,j,s,jw=; p=(int *)malloc(siz ...
-
git提交小结
git有工作区和暂存区的概念,工作区就是可以看到文件目录的地方,暂存区则是提交代码的地方 第一步,进入文件工作目录,终端输入命令 $ dir1/dir2: 第二步,查看哪些文件已经修改,输入命令 $ ...
-
使用jQuery和css3实现了仿淘宝ued博客左边的菜单切换动画
今天看到淘宝ued博客的左侧导航菜单的动画好,要使用jQuery和css3我做一个简单的示例,主要用途是实现jQuery 事件和css3 transition属性. 个元素来实现鼠标滑动到某个导航的背 ...
-
python 中的";*";与";**";
1.Python中 *和**很常见的运算符的用途及其多种使用方式. 本文所述的*和**,指的是*和**前缀运算符,而不是中缀运算符. 所以指的不是乘法和乘幂: 使用*和**将参数传递给函数 使用*和* ...
-
Maven下载私服上的jar包
1.配置M2_HOME/conf/settions.xml <server> <id>maven-public</id> <username>admin ...
-
leetcode 587. Erect the Fence 凸包的计算
leetcode.587.Erect the Fence 凸包问题.好像是我在leetcode做的第一个凸包问题吧. 第一次做,涉及到的东西还是蛮多的.有一个东西很重要,就是已知一个点和一个矢量,求这 ...