2017-10-16 141 views
0

试图关注​​我无法使用fetch从我的https webpack-dev-server重定向。正如你所看到的,我正在提出请求。针对预检的条纹授权重定向响应无效或需要“Access-Control-Allow-Origin”标题(重定向)

return fetch(`https://localhost:3443/stripeAuthorize`, { 
     method: 'GET', 
     headers: { 
     "Access-Control-Allow-Origin": "https://localhost:3443", 
     'Accept': '*/*', 
     } 
    }) 
    .then((data) => { 
     return data.json() 
    }) 
    .then((json) => { 
     console.log('redirectjson', json) 
    }) 
    .catch((err) => { 
     console.log('stripe redirect err caught: ', err) 
    }) 

展望铬的网络选项卡里面我看到的状态代码“303查看其它”两个选项和GET

请求报头:

Accept:*/* 
Accept-Encoding:gzip, deflate, br 
Accept-Language:en-US,en;q=0.8,es;q=0.6,th;q=0.4,zh-TW;q=0.2,zh;q=0.2,la;q=0.2,ja;q=0.2 
Access-Control-Request-Headers:access-control-allow-origin 
Access-Control-Request-Method:GET 
Cache-Control:no-cache 

我也注意到,获取网络通话是在浏览器传入的OPTIONS之上,GET调用将在OPTIONS之前出现,这似乎很奇怪。我似乎无法从条纹或http协议获取任何其他信息。服务器上没有错误调用

如何调试此问题,为什么分条重定向不起作用?

编辑:我想我说得很清楚,如果我删除“访问控制允许来源”我得到的错误:

无法加载 https://connect.stripe.com/express/oauth/authorize?client_id=ca_BR4uV37xvFoKjLE5g9g2wzcmYNT0jnXZ&state=xy5z4k7lpe7rkwyerlxv9rudi&stripe_user%5Bbusiness_type%5D=company: 否“访问控制允许-Origin'标题出现在请求的 资源中。原因'https://localhost:3443'因此不允许 访问。如果一个不透明的响应满足您的需求,请将请求的 模式设置为'no-cors'以禁用CORS来获取资源。

+0

从请求标头中删除''Access-Control-Allow-Origin“:”localhost:3443“;'。这就是您的浏览器发送OPTIONS请求的原因。 Access-Control-Allow-Origin头是服务器发回的严格*回复*头。将其添加到请求中的唯一效果是导致浏览器执行预检,从而导致某些可能会工作的内容。为什么在请求中发送Access-Control-Allow-Origin标头?尝试防止一些其他错误? – sideshowbarker

+0

@sideshowbarker我为没有让自己更清楚而道歉我以为我做了,如果我删除Access-Control-Allow-Origin,我不允许访问。 – mibbit

+0

如果您将Access-Control-Allow-Origin放入请求中,您也不被允许访问 - 而是因为触发预检而导致您得到不同的错误。它没有启用任何新的访问。问题是来自“https:// localhost:3443/stripeAuthorize”的响应没有Access-Control-Allow-Origin标头。而且,因为它没有,您的浏览器会执行正常的默认同源Web安全策略,并阻止您的前端JavaScript代码访问响应。解决办法是配置该服务器发送回访问控制允许起源 – sideshowbarker

回答

0

你有些东西有点混乱起来。

Rocket Rides中的/authorize端点并不意味着要请求fetch()或AJAX,因此您需要将浏览器导航到它。

您所看到的是:您的服务器 - /stripeAuthorize端点 - 将重定向到Express入门流程(您的用户将使用的HTML页面)。这不是用CORS配置的,但是你用fetch()下载它,所以它失败了。在入职流程

window.location.href = '/stripeAuthorize'; 

您的浏览器应该被重定向,你会发现自己(假设一切都正确配置):

相反的fetch('/stripeAuthorize').then(/*...*/),只要写这个。