Điểm:0

Can something in my Nginx config imply why my backend is not sending the 'Access-Control-Allow-Origin' header in POST request?

lá cờ in

*Edit 1: The error seem to be only with POST requests

I have a frontend website on localhost. There is a registration page on localhost/register

The website calls a backend function to register a user at localhost:8080/api/register

I use Axios to POST the username and password. The browser sends two requests: OPTIONS pre-flight request, and then the POST request.

The user is created successfully, however the browser throws an error for the POST request:

Reason: CORS header ‘Access-Control-Allow-Origin’ missing

And indeed it's missing in the response to the POST. Assuming my backend cors file is configured properly, could the issue be from the combination of my Docker + Nginx setup that blocks it or proxy the headers to a wrong place?

This is my nginx config:

server {
    listen 8080;
    index index.php index.html;    
    error_log /var/log/nginx/error.log;
    access_log /var/log/nginx/access.log;
    root /var/www/html/public;
    
    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }
    
    location ~ \.php$ {        
        try_files $uri = 404;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass php:9000;
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;
    }
    
}

  server {    
    listen       80;       
      location / {      
      proxy_pass      http://node:3000;
      
    }
  }

and this is my docker-compose.yml:

networks:
    mynetwork:
        driver: bridge

services:
    nginx:
        image: nginx:stable-alpine
        container_name: nginx
        ports:
            - "8080:8080"
            - "80:80"            
        volumes:            
            - ./php:/var/www/html 
            - ./nginx/default.conf:/etc/nginx/conf.d/default.conf
            
        depends_on:
            - php
            - node
        networks:
            - mynetwork
    
    php:        
        build:
            context: ./php
            dockerfile: Dockerfile
        container_name: php
        user: "1000:1000"
        volumes:
            - ./php:/var/www/html
        ports:
            - "9000:9000"
        networks:
            - mynetwork

    node:
        build:
            context: ./react
            dockerfile: Dockerfile
        container_name: next        
        volumes:
            - ./react:/var/www/html                
        ports:
            - "3000:3000"       

        networks:
            - mynetwork


           

**Edit 2:

The backend is Laravel and it has a CORS middleware that is supposed to take care of it. And in fact it does seem to be working because GET and OPTIONS request pass without error, only the POST request throws this error.

This is the CORS config file (cors.php) in Laravel:

'paths' => ['api/*', 'sanctum/csrf-cookie'],

'allowed_methods' => ['*'],

'allowed_origins' => ['http://localhost'],

'allowed_origins_patterns' => ['*'],

'allowed_headers' => ['*'],

'exposed_headers' => [],

'max_age' => 0,

'supports_credentials' => true
lá cờ us
Không có gì trong cấu hình này có thể thêm tiêu đề CORS. Bạn cần phải chăm sóc nó.
Stackerito avatar
lá cờ in
Cảm ơn bạn. Bạn nói đúng rằng nginx không có bất cứ thứ gì, nhưng phần phụ trợ có một phần mềm trung gian đảm nhận việc đó và trên thực tế khi tôi gửi yêu cầu `GET` và `OPTIONS`, nó sẽ gửi đúng tiêu đề. Nhưng với `POST` thì không. Như bạn đã nói, để khắc phục sự cố yêu cầu `POST`, tôi đã thêm phần sau vào khối máy chủ PHP và hiện tại nó đã hoạt động: `nếu ( $request_method = POST ){ add_header 'Kiểm soát truy cập-Cho phép-Xuất xứ' 'http://localhost'; add_header 'Kiểm soát truy cập-Cho phép-Thông tin xác thực' 'true'; }`. Nhưng tại sao tôi không cần điều đó cho `GET` và `OPTIONS`? đã thêm mã phụ trợ
lá cờ us
Chúng ta chỉ có thể đoán quá trình suy nghĩ của nhà phát triển phần mềm trung gian là gì khi họ triển khai nó.
Stackerito avatar
lá cờ in
Vì vậy, bây giờ tôi nên giữ mã của mình bên trong khối máy chủ cho các yêu cầu `POST`? Cấu hình mới của tôi có phù hợp với bạn không hay tôi đang thiếu thứ gì đó có thể gây ra sự cố? (Nó đang hoạt động, nhưng có lẽ tôi có thể làm cho nó tốt hơn)
lá cờ us
Có, khối `server` vẫn ổn. Tuy nhiên, cách tốt nhất là đảo ngược proxy một đường dẫn đến URL phụ trợ thay vì sử dụng một cổng khác để truy cập phụ trợ khác.
Stackerito avatar
lá cờ in
Bạn có thể giải thích cho tôi cách thay đổi cấu hình hiện tại của tôi để làm điều đó không? Tôi nghĩ đó là những gì tôi đã làm bằng cách ủy quyền cho chương trình phụ trợ của mình tại cổng 8080?
lá cờ us
Thuật ngữ proxy ngược ở trên thực sự không chính xác. Bạn cần thực hiện khối `location /api` bên trong khối `server` với cổng 80, sau đó di chuyển cấu hình cho cổng 8000 trong phần đó. Nghĩa là, bạn cũng nên phục vụ chương trình phụ trợ qua cổng 80, chỉ với một tiền tố khác.
Stackerito avatar
lá cờ in
Tôi đã làm điều gì đó hơi khác một chút: Tôi đã sử dụng tên miền phụ thay vì tuyến đường `/api`. Cách tôi đã làm trước tiên là thêm `api.mysite.local` vào tệp `hosts`, sau đó thêm khối máy chủ lắng nghe trên cổng `80` và chuyển hướng yêu cầu đến khối máy chủ lắng nghe trên cổng `8080` như vì vậy: `return 301 https://api.mysite.local$request_uri;` - đây cũng là một phương pháp hay phải không?
Michael Hampton avatar
lá cờ cz
Điều này thực sự giống như một vấn đề với Laravel hơn là cấu hình nginx của bạn. Bạn đã tìm kiếm sự giúp đỡ với nó trên [so]? Bạn có thể muốn làm như vậy.

Đăng câu trả lời

Hầu hết mọi người không hiểu rằng việc đặt nhiều câu hỏi sẽ mở ra cơ hội học hỏi và cải thiện mối quan hệ giữa các cá nhân. Ví dụ, trong các nghiên cứu của Alison, mặc dù mọi người có thể nhớ chính xác có bao nhiêu câu hỏi đã được đặt ra trong các cuộc trò chuyện của họ, nhưng họ không trực giác nhận ra mối liên hệ giữa câu hỏi và sự yêu thích. Qua bốn nghiên cứu, trong đó những người tham gia tự tham gia vào các cuộc trò chuyện hoặc đọc bản ghi lại các cuộc trò chuyện của người khác, mọi người có xu hướng không nhận ra rằng việc đặt câu hỏi sẽ ảnh hưởng—hoặc đã ảnh hưởng—mức độ thân thiện giữa những người đối thoại.