【原创】Vue.js 中 axios 跨域访问错误
1、假如访问的接口地址为 http://www.test.com/apis/index.php (php api 接口)
2、而开发地址为http://127.0.0.1:8080,当axios发起请求时,出现如下错误:
Failed to load http://www.test.com/apis/index.php?&act=login: The value of the 'Access-Control-Allow-Origin' headerin the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://127.0.0.1:8080' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
解决方法:
1、修改config/index.js, 修改 proxytable
proxyTable: {
'/apis': {
target: 'http://www.test.com/apis/', // 接口地址
changeOrigin: true,
pathRewrite: {
'^/apis': '' //需要rewrite重写的,
}
}
},
2、重启 npm run dev (很重要,否则不生效)
3、访问接口(访问时通过代理转发的,有点类似APACHE的urlrewrite,不需要完整http://www.test.com网址。)
this.$api.get('/apis/index.php?act=login', {
"act": "login"
}, response => {
//success
},error => {
//error
}
);
大功告成,成功解决错误,另外:PHP端不需要做任何的header设置,网上很多教程胡说八道,根本不能实现跨域。
【原创】Vue.js 中 axios 跨域访问错误的更多相关文章
- 关于vue项目中axios跨域的解决方法(开发环境)
1.在config文件中修改index.js proxyTable: { "/api":{ target: 'https://www.baidu.com/muc/',//你需要跨域 ...
- Vue用axios跨域访问数据
Vue用axios跨域访问数据axios是vue-resource的替代品,vue-resource不再维护.安装axios:npm install axios使用vue-cli开发时,由于项目本身启 ...
- vue.js学习之 跨域请求代理与axios传参
vue.js学习之 跨域请求代理与axios传参 一:跨域请求代理 1:打开config/index.js module.exports{ dev: { } } 在这里面找到proxyTable{}, ...
- js中各种跨域问题实战小结(二)
这里接上篇:js中各种跨域问题实战小结(一) 后面继续学习的过程中,对上面第一篇有稍作休整.下面继续第二部分: -->5.利用iframe和location.hash -->6.windo ...
- js中各种跨域问题实战小结(一)
什么是跨域?为什么要实现跨域呢? 这是因为JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.也就是说只能访问同一个域中的资源.我觉得这就有必要了解下javascript中的同源策略 ...
- JS中实现跨域的方法总结
今天早上在地铁看了点基础知识的考察题,看到了一个JS跨域的问题,仔细想了想自己脑子里竟然只剩下jsonp跨域和用nginx反向代理进行跨域,想着还有别的几种方法,就是想不起来,这个人呢,一上岁数这个脑 ...
- react axios 跨域访问一个或多个域名
1.react + axios 跨域访问一个域名 配置非常简单,只需要在当前的 package.json 文件里面配置: "proxy":"http://iot-demo ...
- 001_Three.js中的跨域问题
001_Three.js中的跨域问题 [情景描述]: 在初始化模型,引入字体和纹理皮肤图片的时候,由于跨域问题,出现了以下提示: Access to image at 'file:///F:/User ...
- 前端vue开发中的跨域问题解决,以及nginx上线部署。(vue devServer与nginx)
前言 最近做的一个项目中使用了vue+springboot的前后端分离模式 在前端开发的的时候,使用vue cli3的devServer来解决跨域问题 上线部署则是用的nginx反向代理至后台服务所开 ...
随机推荐
- chrome js 获取css
var myDiv = document.getElementById("chooseRect"); var computedStyle = document.defaultVie ...
- snmptrap、snmpinform和snmptrapd的详细介绍及其用法
http://blog.csdn.net/reille/article/details/8712087
- Class 找出一个整形数组中的元素的最大值
目的:找出一个整形数组中的元素的最大值 以下,我们用类和对象的方法来做. #include<iostream> using namespace std; class Array_m ...
- KeyEvent 键码值
A 至 Z 键与 A – Z 字母的 ASCII 码同样: 值 描写叙述 65 A 键 66 B 键 67 C 键 68 D 键 69 E 键 70 F 键 71 G 键 72 H 键 73 I 键 ...
- sql格式化日期
SELECT CONVERT(date, GETDATE()) ---- SELECT CONVERT(varchar(), GETDATE(), ) ----
- 推断一个点是否在某个区域内。百度,高德,腾讯都能用。(php版)
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/ ...
- oc15--文档安装
// // main.m // 修改项目模板 /* 工程名称: 文件名称: 创建者 : 创建时间: 版权 : 修改人 : 修改时间: */ #import <Foundation/Foundat ...
- <% %> in html
$(document).on('click', '.invoiceNumber', function () { var string = <%= StaticHelper.GetCurrentC ...
- 3-3 第三天 Promise 如何使用
回调的方式来处理异步,目的是要保证一个执行顺序,先完成什么再去完成什么,它们的作用其实是相同的,显然回调更容易来书写,但是它难以维护,很容易遗漏错误处理代码而且无法使用return语句来返回这个值. ...
- Linux Shell Scripting Cookbook 读书笔记 5
sed,awk 1. sed (string editor) 使用-i可以将结果运用于原文件 sed 's/text1/text2/' file > newfile mv newfile fil ...