반응형
Axios의 Cors OPTION 메서드가 Laravel 및 Nginx와 함께 실패함
나는 (Vue)로 웹앱을 만들었다.Axios. 모든 GET-요청은 완벽하게 작동하지만 POST-요청을 할 때는 실패한다.
네트워크 응답에서 POST 대신 OPTION을 보내는 것을 알 수 있다.
Chrome에서는 다음과 같은 회신을 받는다.
OPTIONS https://api.website.com/sheeps net::ERR_NAME_NOT_RESOLVED
그리고 Safari에서는:
Failed to load resource: cancelled
XMLHttpRequest cannot load https://api.website.com/sheeps due to access control checks.
이것은 아마도 Laravel 5.5에서 작성한 API 어플리케이션 때문에 실패하는 것 같아.그래서 나는 이 소포를 LaravelCors에 추가했다.문서를 보면 그게 고칠 수 있을 거라고 나와 있어구성은 다음과 같다.
[
'supportsCredentials' => true,
'allowedOrigins' => ['*'],
'allowedHeaders' => ['*'],
'allowedMethods' => ['*'],
'exposedHeaders' => [],
'maxAge' => 0,
]
그리고 문서로 작성한 것처럼 구성했다
하지만 전혀 고쳐지지 않는다.
서버가 Nginx에서 실행 중임.내가 Laravel 어플리케이션으로 고칠 수 있을까?
Nginx 구성에도 구현:"개방된 nginx CORS 구성"
내 지역 호스트:8080의 애플리케이션에서 모든 것을 테스트하고 있다.
enable-php-fpm.conf
add_header 'Access-Control-Allow-Origin' '*' 항상; 이 "항상"은 nginx를 통해 4*** 3** 5*** php-response-code를 허용하기 위해 매우 중요하다.
"액세스-제어-허용-헤더" 값을 비용화해야 할 수 있음
location ~ [^/]\.php(/|$)
{
# CORS settings
# http://enable-cors.org/server_nginx.html
# http://10.10.0.64 - It's my front end application
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
#
# Custom headers and headers various browsers *should* be OK with but aren't
#
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Authorization';
#
# Tell client that this pre-flight info is valid for 20 days
#
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain; charset=utf-8';
add_header 'Content-Length' 0;
return 204;
}
if ($request_method = 'POST') {
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Authorization';
}
if ($request_method = 'GET') {
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Authorization';
}
try_files $uri =404;
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php;
include fastcgi.conf;
}
www.your-api.com.conf
server {
listen 80;
server_name localhost;
root /home/admin.api.qmmian.cn/public;
index index.php index.html index.htm;
## laravel config
location / {
try_files $uri/ /index.php?$query_string;
}
##enable cors and enable php-fpm
include enable-php-cors.conf;
}
fastcgi.conf
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
fastcgi_param QUERY_STRING $query_string;
fastcgi_param REQUEST_METHOD $request_method;
fastcgi_param CONTENT_TYPE $content_type;
fastcgi_param CONTENT_LENGTH $content_length;
fastcgi_param SCRIPT_NAME $fastcgi_script_name;
fastcgi_param REQUEST_URI $request_uri;
fastcgi_param DOCUMENT_URI $document_uri;
fastcgi_param DOCUMENT_ROOT $document_root;
fastcgi_param SERVER_PROTOCOL $server_protocol;
fastcgi_param REQUEST_SCHEME $scheme;
fastcgi_param HTTPS $https if_not_empty;
fastcgi_param GATEWAY_INTERFACE CGI/1.1;
fastcgi_param SERVER_SOFTWARE nginx/$nginx_version;
fastcgi_param REMOTE_ADDR $remote_addr;
fastcgi_param REMOTE_PORT $remote_port;
fastcgi_param SERVER_ADDR $server_addr;
fastcgi_param SERVER_PORT $server_port;
fastcgi_param SERVER_NAME $server_name;
# PHP only, required if PHP was built with --enable-force-cgi-redirect
fastcgi_param REDIRECT_STATUS 200;
반응형
'Programing' 카테고리의 다른 글
Vuex 2.0 디스패치 대 커밋 (0) | 2022.04.29 |
---|---|
사전 정의된 CSS 스타일을 Vue에서 생성하는 방법(각도에서 할 수 있는 것처럼) (0) | 2022.04.29 |
GDB가 어떤 주소에 문제가 발생했는지 알려주려면 어떻게 해야 할까? (0) | 2022.04.29 |
TypeError: 정의되지 않은 Vuejs의 속성 'posts'를 설정할 수 없음 (0) | 2022.04.28 |
Vue JS - 하나의 구성 요소에 조건부로 정보를 표시 (0) | 2022.04.28 |