thắc mắc Lỗi cors khi call api spring từ react

Yêu Linh Nhất · Oct 12, 2023

E có call 1 api từ react như này:

Nhưng bị lỗi: Access to fetch at 'http://localhost:8762/account/api/test/user' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

E tra gg cách duy nhất e làm đc là bật chrome ở chế độ --disable-web-security thì bình thường, nhưng cách này ko ổn.
Bên gateway và account e đã config cors :

Các bác có cao kiến cứu e ca này :v

phidoi247 · Oct 12, 2023

cái này tôi hay fix = cách cho nginx làm proxy rồi set Origin là $http_origin luôn, bác tham khảo thử

NGINX:

proxy_hide_header 'Access-Control-Allow-Origin'; 
proxy_hide_header 'Access-Control-Allow-Credentials';
if ($request_method = 'OPTIONS') {
    add_header 'Access-Control-Allow-Origin' $http_origin always;
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
    add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,authorization,Authorization,access-control-allow-origin,accept-version';
    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' $http_origin always;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,authorization,Authorization,access-control-allow-origin,accept-version';
    add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
}
if ($request_method = 'GET') {
    add_header 'Access-Control-Allow-Origin' $http_origin always;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,authorization,Authorization,access-control-allow-origin,accept-version'; 
    add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
}

if ($request_method = 'PUT') {
    add_header 'Access-Control-Allow-Origin' $http_origin always;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT';
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,authorization,Authorization,access-control-allow-origin,accept-version';
    add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
}

if ($request_method = 'DELETE') {
    add_header 'Access-Control-Allow-Origin' $http_origin always;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE';
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,authorization,Authorization,access-control-allow-origin,accept-version';
    add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
}

Trong cụm server include đoạn trên vào là đc

NGINX:

server {
    server_name voz.test;

    location / {
        include common-conf/cors.conf;
        include common-conf/upgradews.conf;

        proxy_pass http://192.168.10.177:80;
    }

    error_log off;
    access_log off;

    listen 80;
}

đoạn config header kia bị deplicate code nhưng mình lười sửa bác sửa lại cho đẹp nhé

ktackboss2403 · Oct 12, 2023

bác thử để thêm credentials ở cái fetch nữa xem, sau cái header thêm credentials: 'include' , nếu axios thì withCredentials : true

carty · Oct 12, 2023

Em gà mờ thường dùng dạng vầy thớt ạ :beat_brick:

em để trước layer controller hoặc cả SpringBootApplication luôn

Java:

@CrossOrigin(origins = "*", allowedHeaders = "*")

Love U So Much · Oct 12, 2023

Tôi làm thì dựng thêm 1 con API gateway cho ngầu

Thớt đang học thì tìm hiểu thêm Kong API gateway

Đáng công sức đấy

duckbao · Oct 12, 2023

carty said:
Em gà mờ thường dùng dạng vầy thớt ạ em để trước layer controller hoặc cả SpringBootApplication luôn

Java:

@CrossOrigin(origins = "*", allowedHeaders = "*")

thường thế này là allow cors rồi :big_smile:

k biết cách nào hơn nữa :too_sad:

Yêu Linh Nhất · Oct 12, 2023

Love U So Much said:
Tôi làm thì dựng thêm 1 con API gateway cho ngầu

Thớt đang học thì tìm hiểu thêm Kong API gateway

Đáng công sức đấy

tôi đang học spring cloud gateway, bị lỗi đoạn trên mãi ko fix đc đây

nchhnchh · Oct 12, 2023

1. config cors trong sping (springboot support) ở filter
2. setup ở webserver hay gateway (proxy)

Đấng Tối Cao · Oct 12, 2023

Bên gateway, bạn config này thử, không chắc lắm nha:

application.yml

Code:

spring:
  ...
  cloud:
    gateway:
      default-filters:
        - DedupeResponseHeader=Access-Control-Allow-Credentials Access-Control-Allow-Origin
      globalcors:
        add-to-simple-url-handler-mapping: true
        cors-configurations:
          '[/**]':
            allowedOrigins: "*"
            allowedHeaders: "*"
            allowedMethods: "*"

nhoccoi96vp · Oct 12, 2023

Bỏ cái suy nghĩ là allow * đi bác

Đọc thêm cors để biết công dụng của nó nhé! Phải config ở server để pass được cors của local ( trên dev, staging thôi ) hoặc run chrome ở chế độ without cors nhé.
Bác tham khảo cách run chrome without cors nhé

Run Chrome browser without CORS

alfilatov.com

wtosale02 · Oct 12, 2023

Cái này em hay dùng extension để pass cho tiện.
Hoặc bản chrome mới gần đây đã cho sửa header nhưng có vẻ hơi mất công mỗi lần call api.

nhoccoi96vp · Oct 12, 2023

wtosale02 said:
Cái này em hay dùng extension để pass cho tiện.
Hoặc bản chrome mới gần đây đã cho sửa header nhưng có vẻ hơi mất công mỗi lần call api.
View attachment 2123947

Đấy hoặc dùng extension hoạt động thì n giống cái run without cors. Nó set flag gì trong Chrome là pass

Yêu Linh Nhất · Oct 13, 2023

nhoccoi96vp said:
Bỏ cái suy nghĩ là allow * đi bác Đọc thêm cors để biết công dụng của nó nhé! Phải config ở server để pass được cors của local ( trên dev, staging thôi ) hoặc run chrome ở chế độ without cors nhé.
Bác tham khảo cách run chrome without cors nhé

http://https:confused:/alfilatov.com/posts/run-chrome-without-cors/

e chạy test ở local thôi bác :v

Hoangptkd · Oct 13, 2023

ở python thì mình thêm dòng này là dc CORS(app, resources={r"/api/": {"origins": ""}})
còn js thì ko rõ cho lắm , nhưng đại loại là tìm cách cho phép truy cập từ tất cả
cái này phải set ở server api

nart_1412 · Oct 13, 2023

Trước em có chèn thêm đoạn này dzo là nó hết lỗi, rồi deploy lên prod nó lại lúc lỗi lúc không

))

@app.after_request # blueprint can also be app~~
def after_request(response):
response.headers.add('Access-Control-Allow-Origin','*')
response.headers.add('Access-Control-Allow-Methods','*')
response.headers.add('Access-Control-Allow-Credentials','true')
response.headers.add('Access-Control-Allow-Headers','*')
return response

thắc mắc Lỗi cors khi call api spring từ react

Yêu Linh Nhất

Senior Member

phidoi247

Senior Member

ktackboss2403

Junior Member

carty

Senior Member

Love U So Much

Senior Member

duckbao

Senior Member

Yêu Linh Nhất

Senior Member

nchhnchh

Senior Member

Đấng Tối Cao

Member

nhoccoi96vp

Member

Run Chrome browser without CORS

wtosale02

Senior Member

nhoccoi96vp

Member

Yêu Linh Nhất

Senior Member

Hoangptkd

Senior Member

nart_1412

Senior Member

Similar threads

Share this page