CORS与React和Laravel的问题
我有一个反应应用程序，在http://localhost:3000/和Laravel在http://localhost/blog/public/api/。
我得到以下错误
从源'http://localhost/blog/public/api/auth/signin‘获取'http://localhost:3000’的访问已被CORS策略阻止:请求的资源上没有“访问控制-允许-原产地”标题。如果不透明响应满足您的需要，请将请求的模式设置为“no- CORS”，以获取禁用CORS的资源。
以下是响应头:-
我尝试过通过htaccess，https://packagist.org/packages/barryvdh/laravel-cors
回答 6
Stack Overflow用户
发布于 2019-08-26 13:18:54
以下解决方案应修复Laravel.中的CORS相关问题
Step1:创建一个新的中间件
‘Php artisan make:middleware cors’步骤2:
将下面的内容放在创建的中间，以替换handle方法
public function handle($request, Closure $next) {
return $next($request)
->header('Access-Control-Allow-Origin', '*')
->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
->header('Access-Control-Allow-Headers',' Origin, Content-Type, Accept, Authorization, X-Request-With')
->header('Access-Control-Allow-Credentials',' true');
}步骤3:
然后转到Kernel.php文件，并将其添加到应用程序的全局HTTP中间件堆栈中。
附注：只添加了带注释的最后一行，其他行在前面存在。
protected $middleware = [
\Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode::class,
\Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
\App\Http\Middleware\TrimStrings::class,
\Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
\App\Http\Middleware\TrustProxies::class,
\App\Http\Middleware\Cors::class,//cors added here
];享受吧！
Stack Overflow用户
发布于 2020-07-24 05:33:44
Laravel 7通过巴里的套餐支持开箱即用
否则，使用此composer require fruitcake/laravel-cors安装包
然后发布配置php artisan vendor:publish --tag="cors"
然后根据需要修改它。
下面是一个工作配置(小心，这允许来自其他来源的每个请求)：
<?php
return [
/*
|--------------------------------------------------------------------------
| Laravel CORS Options
|--------------------------------------------------------------------------
|
| The allowed_methods and allowed_headers options are case-insensitive.
|
| You don't need to provide both allowed_origins and allowed_origins_patterns.
| If one of the strings passed matches, it is considered a valid origin.
|
| If array('*') is provided to allowed_methods, allowed_origins or allowed_headers
| all methods / origins / headers are allowed.
|
*/
/*
* You can enable CORS for 1 or multiple paths.
* Example: ['api/*']
*/
'paths' => ['api/*'],
/*
* Matches the request method. `[*]` allows all methods.
*/
'allowed_methods' => ['*'],
/*
* Matches the request origin. `[*]` allows all origins.
*/
'allowed_origins' => ['*'],
/*
* Matches the request origin with, similar to `Request::is()`
*/
'allowed_origins_patterns' => [],
/*
* Sets the Access-Control-Allow-Headers response header. `[*]` allows all headers.
*/
'allowed_headers' => ['*'],
/*
* Sets the Access-Control-Expose-Headers response header.
*/
'exposed_headers' => false,
/*
* Sets the Access-Control-Max-Age response header.
*/
'max_age' => false,
/*
* Sets the Access-Control-Allow-Credentials header.
*/
'supports_credentials' => true,
];Stack Overflow用户
发布于 2020-07-24 06:42:55
如果您使用的是CRA(创建-反应-应用程序)，您可以在react应用程序内部启用CORS。您需要在src文件夹中添加setupProxy.js文件。
const proxy = require("http-proxy-middleware");
module.exports = (app) => {
app.use(
"/api/",
proxy({
target: "https://target.com/",
changeOrigin: true,
pathRewrite: {
"^/api/": "/"
},
})
);
};https://stackoverflow.com/questions/56158474
复制相似问题
腾讯云开发者
