关于vue-resource的jsonp跨域问题 - 简书
关于vue-resource的jsonp跨域问题
首先描述一下问题。由于特殊原因，在使用jsonp调用跨域请求时，回调函数是写在其中一个params里面，并不和params平级，而vue-resource会自动生成一个callback函数，造成回调函数名称对应不上，一直报错。简单点说就是：vue-resource不能自定义回调函数名称。解决路径：翻阅了所有baidu google，找不到解决方法。一气之下直接去翻看源码，发现源码每次都会自动生产回调函数，而且是强制生成，一怒之下直接修改源码。找到vue-resource里的jsonpClient方法。看到callback = '_jsonp'+ Math.random().toString(36).substr(2)修改为：callback = request.params.callback ||'_jsonp'+ Math.random().toString(36).substr(2)重新打包，在params里定义自定义回调函数，问题解决。完毕。希望对后面踩坑着有所帮助。调用方式：this.$http.jsonp(url,{params:{"callback":"jsonPCallback"}}).then(function(response){console.log(response.body);})
IT开发人员，js、nodejs、react-native。
欢迎交流与互相学习。
作为一名前端开发工程师，我们在开发中经常会遇到跨域这个问题。今天想从跨域的原理说起，接着到解决方案，最后到框架对跨域的封装。 跨域指的是在URL访问地址中的协议、域名、端口任意一个不同，都被称为跨域访问。 先对一个URL进行部分的拆分： 如果单独针对前端不涉及服务器，那么是...
本节内容：实现跨域常用的两种方式 —— JSONP 和 CORS 零：跨域报错展示 在非同源情况下，调用 Ajax 向服务端请求数据时，浏览器会阻止这一操作，并且报错如下： 既然出现了相应的问题，便会有对应的解决办法随之而生：可以使用 JsonP 和 CORS 解决跨域问题...
JSONP和跨域 跨域是一位前端工程师经常面对的问题。 面试的时候，面试官会问你一个问题，“解释一下什么是跨域？”，其实百分之八十的面试者都会回答jsonp。如果你回答了jsonp，又会出现很多问题，例如“jsonp的实现原理”，“不用jquery怎么实现jsonp”，“j...
(译) 使用 Vue.js 和 Axios 从第三方 API 获取数据 — SitePoint - 前端 - 掘金更多的往往不是，建立你的JavaScript应用程序时，你会想把数据从远程源或消耗一个[ API ]（https：/ /恩。维基百科。org /维基/ appl...
题目1： 什么是同源策略 浏览器出于安全考虑，只允许与本域下的接口交互。不同源的客户端脚本在没有明确授权的情况下，不能读写对方的资源。本域指的是？ 同协议：如都是http或者https 同域名：如都是/a 和http://jirengu....
前端共同成长小组是一个前端学习社群。 具体信息如下。 小组介绍。 入群后参照自我介绍模板 做自我介绍。并发在群里。请遵守 小组规则。 这里有些 学习方法。希望对你有帮助。 遇到问题，提问要 注意这些。 参照 学习流程 进行学习。 欢迎你提出宝贵的意见和建议，提在 这里 。 ...
周五，一天霾。 听《情非得已》又想起了那句“只怕我自己会爱上你，不敢让自己考得太低。” 1. 昨天晚上做了一个好玩的梦： 走着走着到了一大片田野，种花种豆种菜，这是路的尽头却不是桃花源。 抬起头来看到了学校的名字，我的小学，母校啊。可是怎么变成这个样子了。空余地都变成了菜地...
当你在背后说别人的闲话时，你显示的重点其实不在那个人身上，而是暴露了你自己的人格特质——你喜欢在人背后说人闲话。如此，别人也会从你的闲话由此及彼地联想到自己，他们会因此而认为你是一个品质低劣、说三道四的小人。你会发现，当你在背后说别人闲话时，潜意识里会有隐约的感觉，自己像个...
上一篇：【短篇】琴师攸宁 “哥，你快来看，蚕宝宝吐丝了呢。”我一边招呼着哥哥过来，一边好奇的瞧着。 哥哥走过来，拉起我的手，“安歌，你这样会吓坏它们的。” 我不好意思的笑笑，“我有点激动。” 哥哥拉着我，走出院子，“这样的生活，真好。” 坐在外面的草坪上，我问，“哥，你后悔...
我们无法达成目标，并不是因为受到了阻挠，而是因为我们明确了达成低目标的道路。
――罗伯特·贝劳特 志存高远对获得非凡的结果非常重要。因为取得成功要求有所行动，而采取行动需要你首先有想法。但关键问题是，那些成为成功之跳板的行动都始于远大的...问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
1、vue-source跨域问题，已经在后端设置了response.setHeader("Access-Control-Allow-Origin", "*");使用jQury请求后端可以响应，但采用VueSource就报---Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '' is therefore not allowed access.---代码如下：《jQuery的和VueSource的都在下面》
userSignin:function({commit}, user){
var loginFlag= //false
type:"post",
url:"http://localhost:80/StockAnalyse/LoginServlet",
data:"flag=ajaxlogin&loginName="+user.name+"&loginPwd="+user.id,
async:false, //这里没有用promise，须设置为同步，
dataType:"json",
success:function(data){
loginFlag=
erro:function(){
console.log("something wrong");
if(loginFlag){
commit("userSignin", user);
Vue.http({
method:"post",
url:"http://localhost:80/StockAnalyse/LoginServlet",
data:{"flag":"ajaxlogin","loginName":user.name,"loginPwd":user.id},
headers: {"X-Requested-With": "XMLHttpRequest"},
credientials:false,
emulateHTTP: true
}).then(function(response){
console.log("it's done"+response.string());
commit("userSignin", user);
其实就开发时涉及到跨域，后面会把前端直接扔到后端服务器项目包里，就不存在跨域的问题了， 求大神写支支招，Vue的文档提供的内容确实有限
},function(response){
console.log("game over");
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
其实和选择什么方式无关，既然服务器端允许跨域，那采用这个方式应该是可以的，后面结合jquery默认配置看，配置VUE-RESOURCE时缺少传输的网络文件类型缺少配置，headers: Content-Type不设置，默认值为json/application，在cors定义中，如果Content-Type值不为application/x-www-form-urlencoded，multipart/form-data或text/plain，都被视为非简单请求，即预检请求。所以会报Response to preflight request doesn't pass access control check
Vue.http({
method:"post",
url:"http://localhost:80/StockAnalyse/LoginServlet",
params:{"flag":"ajaxlogin","loginName":user.name,"loginPwd":user.id},
headers: {"X-Requested-With": "XMLHttpRequest"},
headers: {'Content-Type': 'application/x-www-form-urlencoded'}, //新增加
credientials:false,
emulateJSON: true
}).then(function(response){
console.log(response.data);
commit("userSignin", user);
},function(response){
console.log("game over");
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
后台的那个回调函数有没有对应，就是$.ajax中的"jsonp"这个属性
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
题主可以对比一下jQuery和vue-resource发送的请求头看看区别
如果只是开发时需要请求后端api，更简单的方法是设置代理，这样开发和生产环境都不需要跨域，可以保证代码一致
webpack-dev-server设置代理的方法
// webpack.config.js
devServer: {
// http://localhost/api 代理到 http://server/api的设置
target: 'http://server/'
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
可以试下 CORS
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
我觉得是预检没有通过。你看看是不是又一个options请求
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？vue-resource 怎么解决跨域问题_百度知道
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。
vue-resource 怎么解决跨域问题
我有更好的答案
也就是上面的callback名称；（不设置默认为callback），获取我们发送过去的&_callpack&quot，改callback名这里params是要发送的数据对象,{/这步就是关键vue发送jsonp还有两个参数;})
&#47，jsonp是设置回调的名称.jsonp(url，我们来看看Vue.http: {pageID:29},jsonp:&_callback&quot，现在我们就需要后台协助一下
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包Vue中如何使用axios发送jsonp跨域验证 - CNode技术社区
node.js 小学生 -- 杨杨的老婆叫轩然
在使用axios发送请求时，服务器端设置 res.header(“Access-Control-Allow-Origin”, “*”);可以正确得到结果
当服务器端不设置允许跨域时，使用jsonp方式发送就不行了，提示错误如下
XMLHttpRequest cannot load http://localhost:3000/axios?cb=cb. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
那个小伙伴在Vue中使用axios发送跨域请求，请赐教！
把你的请求部分的代码放出来看看
来自酷炫的
// 继承
Vue.prototype.$http =
// 实例化
var vm = new Vue({
el : '#box',
created:function(){
// console.log(111);
this.hello();
methods : {
hello : function(){
this.$http.get('http://localhost:3000/axios?cb=cb',{
// withCredentials:true
}).then(function(data,msg){
console.log(data);
console.log(msg);
}).catch(function(err){
console.log(err);
你看下代码
解决问题的思路就有问题,
jsonp关vue什么事?
找axios去:
最后说几点:
1.jsonp一样需要服务端支持,为什么不用cors呢?
2.不建议将ajax和vue绑定在一起,
3.我是用swagger代码生成模板将所有ajax封装了一层promise,屏蔽掉ajax调用过程,只有promise(接口)才是稳定的,依赖于抽象而不是实现.
你说的这个jsonp模块我已经实现了，感觉他和axios就没有什么关系了
在vue 2.0中官方不是也推荐使用axios进行数据请求吗
vue官方推荐axios是因为它是一个优良的ajax库,而不是说它就应该和vue绑定在一起,vue-resource的一些奇怪的约定事实上没有带来任何好处,
vue和axios没有任何关联性和排斥性,应该尽量保持职责分离,
axios不支持jsonp,这是官方的明确表态,如果非要用jsonp,那就不要用它.
而且想一想,如果你们后期需要将jsonp升级成cors,那是不是要到处改代码,
但如果你封装成promise后,则可以一次性统一替换promise里面的具体实现,
这就是为什么软件开发应该依赖抽象而不是具体
搞后端的,这应该是入门级思想,但在前端,这方面很多人都认知不足.
跨域资源共享（CORS）
JSONP本质上是为浏览器添加一个script标签，因为script里面的src可以不考虑跨域的问题。
因为axios是不支持jsonp的，所以如果你在不使用jquery的ajax的情况下，你是可以考虑自己封装一个的，也不麻烦，就像这样。
&!DOCTYPE html&
&title&测试&/title&
&meta charset=&utf-8& /&
&/head&
&script type=&text/javascript&&
//百度suggets api
var s = &https:///5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=132&json=1&;
var fetchJsonp = function(url){
var body = document.getElementsByTagName('body')[0];
//插入一个script
var script = document.createElement('script');
script.setAttribute('src',url);
body.appendChild(script);
//为了符合百度查询api而建立的一个对象
window.baidu = {};
//script载入完之后会调用这个函数，sug就是suggest的内容
window.baidu.sug = function(sug){
console.log(sug);
//调用
fetchJsonp(s);
&/script&
&/body&
&/html&
这个是我调用百度的suggest的接口实现的，非常简单。
CNode 社区为国内最专业的 Node.js 开源技术社区，致力于 Node.js 的技术研究。
服务器赞助商为
，存储赞助商为
，由提供应用性能服务。
新手搭建 Node.js 服务器，推荐使用无需备案的