前提・実現したいこと
現在フロントとバックエンドのサーバーを分けてWebアプリを作成しています
・フロント: Next.js
・バックエンド: Docker + Nginx + Django
そしてこの2つのサーバー間でデータのやり取りがしたいのですが、corsの設定が上手く行きません
uwsgiを使用しているのでそちらの問題かもしれません
よろしくお願いします
発生している問題・エラーメッセージ
Access to fetch at 'http://localhost:8000/dj-rest-auth/registration/verify-email/' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.
該当のソースコード
Next
1export async function AccountConfirm(key: string | string[]) { 2 let isSuccess: boolean = false; 3 await fetch( 4 `${process.env.NEXT_PUBLIC_RESTAPI_URL}dj-rest-auth/registration/verify-email/`, 5 { 6 method: "POST", 7 body: JSON.stringify({ key: key }), 8 headers: { 9 "Content-Type": "application/json", 10 }, 11 credentials: "include", 12 } 13 ).then((res) => { 14 if (res.ok) { 15 isSuccess = true; 16 } 17 }); 18 return isSuccess; 19}
Nginx
1upstream django { 2 ip_hash; 3 server python:8080; 4} 5 6server { 7 listen 8000; 8 server_name 127.0.0.1; 9 charset utf-8; 10 11 location /static { 12 alias /static; 13 } 14 15 location / { 16 uwsgi_pass django; 17 include /etc/nginx/uwsgi_params; 18 19 # CORS start 20 proxy_hide_header Access-Control-Allow-Origin; 21 add_header Access-Control-Allow-Origin "http://localhost:3000"; 22 23 proxy_hide_header Access-Control-Allow-Headers; 24 add_header Access-Control-Allow-Headers "Origin, Authorization, Accept"; 25 26 proxy_hide_header Access-Control-Allow-Methods; 27 add_header Access-Control-Allow-Methods "POST, GET, OPTIONS"; 28 29 proxy_hide_header Access-Control-Allow-Credentials; 30 add_header Access-Control-Allow-Credentials true; 31 # CORS end 32 } 33} 34 35server_tokens off;
docker
1version: "3" 2 3services: 4 nginx: 5 image: nginx:1.21.1 6 ports: 7 - "8000:8000" 8 volumes: 9 - ./nginx/conf:/etc/nginx/conf.d 10 - ./nginx/uwsgi_params:/etc/nginx/uwsgi_params 11 - ./static:/static 12 depends_on: 13 - python 14 15 db: 16 image: mysql:8.0 17 command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci 18 ports: 19 - "3306:3306" 20 environment: 21 MYSQL_ROOT_PASSWORD: root 22 MYSQL_DATABASE: hoge 23 MYSQL_USER: user 24 MYSQL_PASSWORD: password 25 TZ: "Asia/Tokyo" 26 volumes: 27 - ./mysql:/var/lib/mysql 28 - ./sql:/docker-entrypoint-initdb.d 29 - ./sqlcnf:/etc/mysql/conf.d/my.cnf 30 31 python: 32 build: ./python 33 command: uwsgi --socket :8080 --module config.wsgi --py-autoreload 1 --logto /tmp/mylog.log 34 volumes: 35 - ./back:/hoge 36 - ./static:/static 37 expose: 38 - "8080" 39 depends_on: 40 - db
試したこと
エラーコードをコピペして検索してみましたが、出てきた情報はどれもAccess-Control-Allow-Origin
を追加しろというような情報ばかりで解決には至りませんでした。
補足情報(FW/ツールのバージョンなど)
OS: macOS 10.15.7
Next.js: 11.0.1
nginx: 1.21.1
実際に通信した時のヘッダー
devツールでヘッダーを見てみるとAccess-Control-Allow-Origin
が追加されていないようです
設定が間違えているんでしょうか?
curlコマンドを叩いてみた結果
❯ curl -i -XOPTIONS -H 'Access-Control-Request-Method: POST' -H Origin:localhost:3000 localhost:8000 HTTP/1.1 200 OK Server: nginx Date: Thu, 15 Jul 2021 07:35:46 GMT Content-Type: text/html; charset=utf-8 Content-Length: 0 Connection: keep-alive Vary: Origin Access-Control-Allow-Origin: localhost:3000 Access-Control-Allow-Headers: accept, accept-encoding, authorization, content-type, dnt, origin, user-agent, x-csrftoken, x-requested-with Access-Control-Allow-Methods: DELETE, GET, OPTIONS, PATCH, POST, PUT Access-Control-Max-Age: 86400 X-Content-Type-Options: nosniff Referrer-Policy: same-origin Access-Control-Allow-Origin: http://localhost Access-Control-Allow-Headers: Origin, Authorization, Accept, Content-Type Access-Control-Allow-Methods: POST, GET, OPTIONS Access-Control-Allow-Credentials: true Content-Type: text/plain charset=UTF-8 Content-Length: 0
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。