CORS发布请求失败 [英] CORS Post Request Fails
本文介绍了CORS发布请求失败的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我使用SLIM Micro-Framework构建了一个API。我使用以下代码设置一些添加CORS标头的中间件。
class Cors {
public function __invoke(Request $ request,Response $ response,$ next){
$ response = $ next($ request,$ response);
return $ response
- > withHeader('Access-Control-Allow-Origin','http:// mysite')
- > withHeader('Access-Control-Allow-
- > withHeader('Access-Control-Allow-Methods','GET,POST,PUT,DELETE,OPTIONS ');
}
}
对于我的前端使用VueJS。我设置VueResource并使用下面的代码创建了一个函数。
注册(上下文,电子邮件,密码){
Vue .http({
url:'api / auth / register',
method:'POST',
data:{
email:email,
password:password
}
})。then(response => {
context.success = true
},response => {
context.response = response.data
context.error = true
})
}
chrome,以下错误记录到控制台。
XMLHttpRequest无法加载http:// mysite:9800 / api / auth /寄存器。对预检请求的响应不通过访问控制检查:在请求的资源上不存在Access-Control-Allow-Origin头。因此,'http:// mysite'的起源不允许访问。
奇怪的是,GET请求工作正常。
你遗漏的是一个OPTIONS路由,其中这些头需要
$ app-> options('/ {routes:。+}',function($ request, $ response,$ args){
return $ response
- > withHeader('Access-Control-Allow-Origin','http:// mysite')
- > withHeader 'Access-Control-Allow-Methods','GET','Access-Control-Allow-Headers','X-Requested-With,Content-Type,Accept,Origin,Authorization')
-& POST,PUT,DELETE,OPTIONS');
});
I built an API with the SLIM Micro-Framework. I setup some middleware that adds the CORS headers using the following code.
class Cors{
public function __invoke(Request $request, Response $response, $next){
$response = $next($request, $response);
return $response
->withHeader('Access-Control-Allow-Origin', 'http://mysite')
->withHeader('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type, Accept, Origin, Authorization')
->withHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
}
}
For my front-end, I used VueJS. I setup VueResource and created a function with the following code.
register (context, email, password) {
Vue.http({
url: 'api/auth/register',
method: 'POST',
data: {
email: email,
password: password
}
}).then(response => {
context.success = true
}, response => {
context.response = response.data
context.error = true
})
}
In chrome, the following error is logged to the console.
XMLHttpRequest cannot load http://mysite:9800/api/auth/register. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://mysite' is therefore not allowed access.
Oddly enough, GET requests work perfectly.
解决方案
You half 1/2 the solution here.
What you are missing is an OPTIONS route where these headers need to be added as well.
$app->options('/{routes:.+}', function ($request, $response, $args) {
return $response
->withHeader('Access-Control-Allow-Origin', 'http://mysite')
->withHeader('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type, Accept, Origin, Authorization')
->withHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
});
这篇关于CORS发布请求失败的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文