laravel - Axios 请求已被 cors 阻止,请求的资源上不存在“Access-Control-Allow-Origin”标头
问题描述
我正在尝试向 ERP API 发出请求,并得到以下响应:
从源“http://connector.test”访问“http://ip:8082/auth”的 XMLHttpRequest 已被 CORS 策略阻止:对预检请求的响应未通过访问控制检查:没有“访问控制” -Allow-Origin' 标头出现在请求的资源上。
虽然在我的请求中有一个标头 Access-Control-Allow-Origin:
getAuth() {
axios.post('http://'+this.ip + '/auth/', {
headers: {
"Content-Type": "application/json",
"Cookie": this.sessionid,
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, POST, PATCH, PUT, DELETE, OPTIONS",
"Access-Control-Allow-Headers": "Origin, Content-Type, X-Auth-Token, Authorization, Accept,charset,boundary,Content-Length"
},
data: {
username: this.username,
password: this.password
}
}).then(response => {
this.getItems();
})
},
Cors.php
'paths' => ['*'],
'allowed_methods' => ['*'],
'allowed_origins' => ['*'],
'allowed_origins_patterns' => [],
'allowed_headers' => ['*'],
'exposed_headers' => [],
'max_age' => 0,
'supports_credentials' => true,
js/bootstrap.js
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
window.axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
window.axios.defaults.headers.common['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS, PUT, DELETE';
添加了我自己的中间件
中间件/cors.php
return $next($request)
->header('Access-Control-Allow-Origin', '*')
->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE,
OPTIONS');
将其添加到 kernel.php $routeMiddleware 然后 web.php
Route::get('/', [App\Http\Controllers\MainController::class, 'index'])->middleware(Cors::class);
请求标头
Request URL: http://ip:8082/auth
Referrer Policy: strict-origin-when-cross-origin
Provisional headers are shown
Accept: application/json, text/plain, */*
Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE
Access-Control-Allow-Origin: *
Content-Type: application/json;charset=UTF-8
Referer: http://connector.test/
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36
X-Requested-With: XMLHttpRequest
使用 PHP Curl 在后端执行请求可以正常工作,但我想使用 Vue 使其在前端工作。
解决方案
Web 浏览器具有阻止对网站的大规模 DOS 攻击的安全功能。简而言之,在 X 上运行的任何代码都不能在 Y 上请求资源,除非 Y 明确允许 X 请求它。这是通过 Access-Control-Allow-Origins 标头完成的。
您必须将此添加到您的网络服务器或后端代码。
推荐阅读
- html - 多行文字CSS的打字效果
- jasmine - 在 e2e 测试中,使用 Protractor 在 Chromium Edge (New Edge Browser) 中打开空白页面
- sql - SQL 根据多个连接的条件更新单列
- c# - 获取机器上的绝对文件路径。ASP.NET 核心
- powershell - 根据属性值获取 Generic/List 中对象的索引
- python - 使用相同的数据进行测试和验证
- arguments - Discord.js @everyone / @here 消息问题
- c - 在链表末尾添加一个元素
- python - 添加到列表的字典的条件检查
- r - 来自ggplot对象的多边形分析中的R点