Vuejs 和 Laravel 发布请求 CORS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37860851/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vuejs and Laravel Post Request CORS
提问by bobbybackblech
I dont get it. I am struggling with this since hours
我不明白。几个小时以来我一直在为此而苦苦挣扎
I am using Vue.js with Laravel and try to make a POST Request to an external API.
我在 Laravel 中使用 Vue.js 并尝试向外部 API 发出 POST 请求。
But i am always getting a CORS error on my Vue POST Request
但是我总是在我的 Vue POST 请求中收到 CORS 错误
methods: {
chargeCustomer(){
this.$http.post('/api/chargeCustomer', this.payment).then(function (response) {
console.log(response.data)
},function (response) {
console.log(response.data)
});
}
}
ERROR
错误
MLHttpRequest cannot load https://www.mollie.com/payscreen/select-method/JucpqJQses. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://payment.dev' is therefore not allowed access.
MLHttpRequest 无法加载 https://www.mollie.com/payscreen/select-method/JucpqJQses。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问源 ' https://payment.dev'。
I installed the Laravel CORS Packagefor my Backend and added the middleware to my route e.g
我为我的后端安装了Laravel CORS 包，并将中间件添加到我的路由中，例如
Route::group(['middleware' => 'cors'], function(){
Route::post('/api/chargeCustomer', 'Backend\PaymentController@chargeCustomer');
});
But i am still getting the error. I also tried to add the Vue Headers with
但我仍然收到错误。我还尝试添加 Vue Headers
Vue.http.headers.common['Access-Control-Allow-Origin'] = '*';
Vue.http.headers.common['Access-Control-Request-Method'] = '*';
With the same result/error.
具有相同的结果/错误。
Could someone tell me what i am doing wrong?
有人能告诉我我做错了什么吗？
采纳答案by Ruffles
You need to set up the CORS headers from the middleware. Maybe you need some extra setup?
您需要从中间件设置 CORS 标头。也许你需要一些额外的设置？
Anyway, you can create your own middleware and set up the CORS headers in the handle()method like the following example:
无论如何，您可以创建自己的中间件并在handle()方法中设置 CORS 标头，如下例所示：
public function handle($request, Closure $next)
{
return $next($request)
->header('Access-Control-Allow-Origin', 'http://yourfrontenddomain.com') // maybe put this into the .env file so you can change the URL in production.
->header('Access-Control-Allow-Methods', '*') // or specify `'GET, POST, PUT, DELETE'` etc as the second parameter if you want to restrict the methods that are allowed.
->header('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type, Authorization') // or add your headers.
}
Add your custom middleware to the global $middlewarearray (under CheckForMaintenanceMode::class) in the Kernel.php class and you should be good to go.
将您的自定义中间件添加到Kernel.php 类中的全局$middleware数组（在 下CheckForMaintenanceMode::class），您应该很高兴。
回答by Victor Gazotti
Other way (without creating a new laravel middleware) is add these headers at the begining of your routes.php
其他方式（不创建新的 Laravel 中间件）是在 routes.php 的开头添加这些标头
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE');
header('Access-Control-Allow-Headers: Content-Type, X-Auth-Token, Origin, Authorization');
and add this before your interceptors on vue:
Vue.http.options.crossOrigin = true
并在 vue 上的拦截器之前添加此内容：
Vue.http.options.crossOrigin = true
