我想在我的页面中获取数据,如果我运行:
axios.get('http://localhost:8000/api/posts')
.then(response => {
console.log(response.data);
})
.catch((error) => {
console.log('error ' + error);
});
获取http://localhost:8000/api/posts net::err_aborted401(未经授权)
CORS策略阻止从来源“http://localhost:3000”访问位于“http://localhost:8000/api/posts”的XMLHttpRequest:请求的资源上没有“access-control-allog-origin”标头。
headers: {
Authorization: 'Bearer ' + token,
crossDomain: true,
'Access-Control-Allow-Origin': '*'
}
Route::middleware('auth:api')->group(function () {
Route::get('posts', 'PostController@index');
});
AuthServiceProvider.php
$this->registerPolicies();
Route::group([ 'middleware' => [ \App\Http\Middleware\CORS::class ]], function() {
Passport::routes();
});
routeserviceProvider.php
$this->mapApiRoutes();
$this->mapWebRoutes();
Route::group([
'middleware' => ['auth:api', 'cors'],
'namespace' => $this->namespace,
'prefix' => 'auth:api',
], function ($router) {
Route::apiResource('posts','PostController');
});
但是,如果我从Axios
中删除header
,并将route
移到passport auth之外,它就可以正常工作,我的意思是在组之外如下所示:
Route::get('posts', array('middleware' => 'cors', 'uses' => 'PostController@index'));
Route::group(['prefix' => 'auth:api', 'middleware' => 'cors'], function(){
Route::get('posts', 'PostController@index');
});
为了允许CORS,我们必须在服务器端和客户端都启用请求,这可能有助于在axios中添加请求头部分
标头:{“访问-控制-允许-起源”:“*”}
对于路由,添加
Route::options(
'/{any:.*}',
[
'middleware' => ['CorsMiddleware'],
function (){
return response(['status' => 'success']);
}
]
);
<?php
namespace App\Http\Middleware;
use Closure;
use Illuminate\Http\Response;
class CorsMiddleware
{
protected $settings = array(
'origin' => '*', // Wide Open!
'allowMethods' => 'GET,HEAD,PUT,POST,DELETE,PATCH,OPTIONS',
);
protected function setOrigin($req, $rsp) {
$origin = $this->settings['origin'];
if (is_callable($origin)) {
// Call origin callback with request origin
$origin = call_user_func($origin,
$req->header("Origin")
);
}
$rsp->header('Access-Control-Allow-Origin', $origin);
}
protected function setExposeHeaders($req, $rsp) {
if (isset($this->settings['exposeHeaders'])) {
$exposeHeaders = $this->settings['exposeHeaders'];
if (is_array($exposeHeaders)) {
$exposeHeaders = implode(", ", $exposeHeaders);
}
$rsp->header('Access-Control-Expose-Headers', $exposeHeaders);
}
}
protected function setMaxAge($req, $rsp) {
if (isset($this->settings['maxAge'])) {
$rsp->header('Access-Control-Max-Age', $this->settings['maxAge']);
}
}
protected function setAllowCredentials($req, $rsp) {
if (isset($this->settings['allowCredentials']) && $this->settings['allowCredentials'] === True) {
$rsp->header('Access-Control-Allow-Credentials', 'true');
}
}
protected function setAllowMethods($req, $rsp) {
if (isset($this->settings['allowMethods'])) {
$allowMethods = $this->settings['allowMethods'];
if (is_array($allowMethods)) {
$allowMethods = implode(", ", $allowMethods);
}
$rsp->header('Access-Control-Allow-Methods', $allowMethods);
}
}
protected function setAllowHeaders($req, $rsp) {
if (isset($this->settings['allowHeaders'])) {
$allowHeaders = $this->settings['allowHeaders'];
if (is_array($allowHeaders)) {
$allowHeaders = implode(", ", $allowHeaders);
}
}
else { // Otherwise, use request headers
$allowHeaders = $req->header("Access-Control-Request-Headers");
}
if (isset($allowHeaders)) {
$rsp->header('Access-Control-Allow-Headers', $allowHeaders);
}
}
protected function setCorsHeaders($req, $rsp) {
// http://www.html5rocks.com/static/images/cors_server_flowchart.png
// Pre-flight
if ($req->isMethod('OPTIONS')) {
$this->setOrigin($req, $rsp);
$this->setMaxAge($req, $rsp);
$this->setAllowCredentials($req, $rsp);
$this->setAllowMethods($req, $rsp);
$this->setAllowHeaders($req, $rsp);
}
else {
$this->setOrigin($req, $rsp);
$this->setExposeHeaders($req, $rsp);
$this->setAllowCredentials($req, $rsp);
}
}
/**
* Handle an incoming request.
*
* @param \Illuminate\Http\Request $request
* @param \Closure $next
* @return mixed
*/
public function handle($request, Closure $next) {
if ($request->isMethod('OPTIONS')) {
$response = new Response("", 200);
}
else {
$response = $next($request);
}
$this->setCorsHeaders($request, $response);
return $response;
}
}
$app->routeMiddleware([
'CorsMiddleware' => App\Http\Middleware\CorsMiddleware::class,
]);
问题内容: 我目前正在尝试在NodeJS + React App中实现Auth0。尽管存在一个大问题,但给出的本教程确实非常有用且很有帮助。每次我尝试通过Auth0登录/注册时,都会收到 XMLHttpRequest无法加载 https://XYZ.eu.auth0.com/usernamepassword/login。对预检请求的响应未通过访问控制检查:在所请求的资源上不存在“ Access-C
我正在使用“React admin”创建一个管理界面(前端)。我正在使用spring boot作为我的REST API。我的React应用程序的url是:“http://localhost:3000”。我的spring boot API的url是:“http://localhost:8080”。 下面是CORS配置的spring boot代码,它在一个单独的类中,称为CORSCONFIG: 下面是
问题内容: 我试图在获得图像之前先在画布上绘制图像,但是返回的数据就像是空的。 当我在控制台中检查它时,我发现字符串中有很多:() 当我尝试将画布附加到文档时,也没有绘制任何内容,并且控制台中没有引发任何错误。 这里有什么问题 ? 这是我的代码: 另外,进行快速刷新时,图像会正确绘制到画布上,但是控制台中出现错误消息,并且为空。 Firefox中的消息是: “ SecurityError:操作不安
问题内容: 由于某种原因,每当我尝试将一些数据发布到api服务器时,都会出现以下两个错误。 这是我的客户端有角JS代码,试图发送一些简单数据。该代码当前正在位于以下位置的Nginx服务器上运行 这是我的节点JS代码,用于处理“处理”请求 问题答案: 如错误消息所述,您必须在对预检的响应中确认Content-Type标头。这可能是由于您的请求的非“简单” Content- Type(表面上是appl
问题内容: 我有一个基于@RestController和AngularJS的简单项目。我可以将Angular的GET请求发送到@RestController,但无法发送POST请求。我在浏览器控制台中出错: XMLHttpRequest无法加载http:// localhost:8080 / add 。Access-Control-Allow- Headers不允许请求标头字段Content-Ty
我将vuejs与nodejs一起使用,vue客户端地址,nodejs服务器地址。 响应中的错误是