docker - 使用 docker nginx 从本地 reactjs 向流明后端发出请求时出现 cors 问题
问题描述
通过 reactjs 测试我的 API 端点时,我遇到了 CORS 问题。
我在 google chrome 日志中收到此错误
从源“ http://localhost:3000 ”访问“ http://localhost/v1/testendpoint ”处的 XMLHttpRequest已被 CORS 策略阻止:对预检请求的响应未通过访问控制检查:没有“访问控制” -Allow-Origin' 标头出现在请求的资源上。
此外,CORS 是在 laravel 中间件中设置的。
{
$headers = [
'Access-Control-Allow-Origin' => '*',
'Access-Control-Allow-Methods' => 'POST, GET, PUT, DELETE, OPTIONS',
'Access-Control-Allow-Headers' => 'Content-Type, Authorization, Accept, X-Requested-With'
];
if ($request->isMethod('OPTIONS'))
{
return response()->json('{"method":"OPTIONS"}', 200, $headers);
}
$response = $next($request);
foreach($headers as $key => $value)
{
$response->header($key, $value);
}
return $response;
}
docker内部的nginx设置如下。
listen 80; ## listen for ipv4; this line is default and implied
listen [::]:80 default ipv6only=on; ## listen for ipv6
#root /usr/share/nginx/html;
root /var/www/html/public;
index index.php index.html index.htm;
# Make site accessible from http://localhost/
server_name _;
# Disable sendfile as per https://docs.vagrantup.com/v2/synced-folders/virtualbox.html
sendfile off;
# Security - Hide nginx version number in error pages and Server header
server_tokens off;
# Add stdout logging
error_log /dev/stdout info;
access_log /dev/stdout;
# reduce the data that needs to be sent over network
gzip on;
gzip_min_length 10240;
gzip_proxied expired no-cache no-store private auth;
gzip_types text/plain text/css text/xml application/json text/javascript application/x-javascript application/xml;
gzip_disable "MSIE [1-6]\.";
location / {
# First attempt to serve request as file, then
# as directory, then fall back to index.html
try_files $uri $uri/ /index.php?$query_string;
add_header 'Access-Control-Allow-Origin: *');
add_header 'Access-Control-Allow-Origin: GET, POST, DELETE, PUT, PATCH, OPTIONS');
add_header 'Access-Control-Allow-Credentials: true');
}
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
# pass the PHP scripts to FastCGI server listening on socket
#
location ~ \.php$ {
try_files $uri /index.php =404;
fastcgi_split_path_info ^(.+\.php)(/.+)$;
fastcgi_pass unix:/run/php/php7.2-fpm.sock;
fastcgi_index index.php;
include fastcgi_params;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
fastcgi_param PATH_INFO $fastcgi_path_info;
}
location ~* \.(jpg|jpeg|gif|png|css|js|ico|xml)$ {
expires 5d;
}
# deny access to . files, for security
#
location ~ /\. {
log_not_found off;
deny all;
}
}
有谁知道为什么会这样。
解决方案
我找到了解决这个问题的方法,通过使用谷歌浏览器中的插件来绕过谷歌允许 CORS 插件。
推荐阅读
- autodesk-designautomation - 错误:应用程序 revitcoreconsole.exe 以代码 -19088744 退出,表示错误
- cython - 使用 nogil 对 memoryviews 进行引用计数
- sql-server - 使用 SSIS 从网站 (URL) 读取多个 CSV 文件?
- postgresql - PostgreSQL 删除记录但不删除表/列的权限
- android - Android资源编译失败... Android Studio 4.0.1
- angular - GroupBy 将一个 RxJS Observable 转化为键值
- python - 执行用 pytests 编写的测试用例的最有效方法是什么?
- python - 在不使用python中的库的情况下,将两个不同大小的元素列表相乘
- log4j2 - log4j2 Syslog Appender 支持的 TLS 版本
- email - 使用 Ansible 邮件拒绝发件人地址