vue项目中的跨域源请求拦截问题CORS头缺少'Access-Control-Allow-Origin'

这里使用的是axios发请求出现的。
访问的api接口是:

在不同域之间访问是比较常见,在本地调试访问远程服务器。。。。这就是有域问题。
VUE解决通过proxyTable
解决办法:
1.检查请求方式:我一开始是用了this.axios.post(url),改为this.axios.get(url)

2.将axios的
axios.defaults.baseURL = 'http://XXX.com';//注释掉
3.配置proxyTable,意思是如果请求地址以/api,或者/XXapi 开头,则自动加上target,直接看例子
原来:this.axios.get('/api/appname=3')
配置了下方的proxyTable后
发请求的时候就相当于this.axios.get('http://XXX.com/api/apname=3')

注意,代理成功后,打开浏览器调试,请求地址出现localhost是正常的,实际上已经通过代理转到了外网服务器中

参考:
https://www.cnblogs.com/cscredis/p/9286250.html
vue项目中的跨域源请求拦截问题CORS头缺少'Access-Control-Allow-Origin'的更多相关文章
- 关于vue项目中axios跨域的解决方法(开发环境)
1.在config文件中修改index.js proxyTable: { "/api":{ target: 'https://www.baidu.com/muc/',//你需要跨域 ...
- vue项目中解决跨域问题axios和
项目如果是用脚手架搭建的(vue cli)项目配置文件里有个proxyTable proxyTable是vue-cli搭建webpack脚手架中的一个微型代理服务器,配置如下 配置和安装axios 安 ...
- vue项目中设置跨域
config->index.js 'use strict' // Template version: 1.3.1 // see http://vuejs-templates.github.io/ ...
- Vue+webpack项目中实现跨域的http请求
目前Vue项目中对json数据的请求一般使用两个插件vue-resource和axios, 但vue-resource已经不再维护, 而axios是官方推荐的且npm下载量已经170多万,github ...
- Vue项目多域名跨域
在Vue项目中请求后台数据时,遇到的多域名跨域问题. 直接上代码: assetsSubDirectory: "static", assetsPublicPath: "/& ...
- 前端vue开发中的跨域问题解决,以及nginx上线部署。(vue devServer与nginx)
前言 最近做的一个项目中使用了vue+springboot的前后端分离模式 在前端开发的的时候,使用vue cli3的devServer来解决跨域问题 上线部署则是用的nginx反向代理至后台服务所开 ...
- web项目中的跨域问题解决方法
一种是JSONP 一种是 CORS. 在客户端Javascript调用服务端接口的时候,如果需要支持跨域的话,需要服务端支持. JSONP的方式就是服务端对返回的值进行回调函数包装,他的优点是支持众多 ...
- Vue项目中使用Vuex + axios发送请求
本文是受多篇类似博文的影响写成的,内容也大致相同.无意抄袭,只是为了总结出一份自己的经验. 一直以来,在使用Vue进行开发时,每当涉及到前后端交互都是在每个函数中单独的写代码,这样一来加大了工作量,二 ...
- 004. 前端跨域资源请求: JSONP/CORS/反向代理
1.什么是跨域资源请求? https://www.cnblogs.com/niuli1987/p/10252214.html 同源: 如果两个页面的协议,端口(如果有指定)和域名都相同,则两个页面具有 ...
随机推荐
- 3. Rsync-远程同步(下)-企业案例
已知3台服务器主机名分别为web01.backup .nfs主机信息见下表: 角色 外网IP(NAT) 内网IP(LAN) 主机名 WEB eth0:10.0.0.7 eth1:172.16.1.7 ...
- 【Autofac打标签模式】Component和Autowired
[ Autofac打标签模式]开源DI框架扩展地址: https://github.com/yuzd/Autofac.Annotation/wiki Componet标签把类型注册到DI容器 1. 把 ...
- 【RabbitMQ 实战指南】一 延迟队列
1.什么是延迟队列 延迟队列中存储延迟消息,延迟消息是指当消息被发送到队列中不会立即消费,而是等待一段时间后再消费该消息. 延迟队列很多应用场景,一个典型的应用场景是订单未支付超时取消,用户下单之后3 ...
- 百万年薪python之路 -- 基础数据类型的补充练习
1.看代码写结果 v1 = [1,2,3,4,5] v2 = [v1,v1,v1] v1.append(6) print(v1) print(v2) [1,2,3,4,5,6] [[1,2,3,4,5 ...
- Type of the default value for 'songs' prop must be a function
eslint常会出现这样的错误提示,控制台打印:Type of the default value for 'songs' prop must be a function 解决办法有两种如下: 1:写 ...
- sqlite复制表
(1)复制表,并把原表的 所有记录都复制到新表里. CREATE TABLE newTb AS SELECT * FROM oldTb (2)只复制表结构,不复制数据到新表里. 注:该语句无法复制关键 ...
- WebSocket原理及技术简介
摘要: WebSocket用于在Web浏览器和服务器之间进行任意的双向数据传输的一种技术.WebSocket协议基于TCP协议实现,包含初始的握手过程,以及后续的多次数据帧双向传输过程.其目的是在We ...
- Mybatis JdbcType与Oracle、MySql 数据类型对应关系
MyBatis 包含的jdbcType类型 ------------------------------------------------------------------------------ ...
- tracert/traceroute原理
一.路由追踪程序traceroute/tracert Traceroute是Linux和Mac OS等系统默认提供的路由追踪小程序,Tracert是Windows系统默认提供的路由追踪小程序.二者的功 ...
- Java对象的"后事处理"——垃圾回收(二)
1 先谈Finalize() finalize()能做的所有工作,使用try-finally或者其他方式都可以做得更好.更及时,所以笔者建议大家完全可以忘掉Java语言中有这个方法的存在. ——< ...