nginxのCORSエラーを解決したいです
nginxのCORSエラーを解決したい
この質問の続きで、新たなエラーが発生してしまいました。
発生している問題・エラー
Access to fetch at 'https://example.com' 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.
reactで、完成したはずのWebAPIをfetchしたところ、CORSエラーが発生してしまいました。
調べてみたところ、サーバー側のAccess-Control-Allow-Originの設定が必要とのことでした。
そこで、
こちらの2つのサイトを参考にさせてもらい、自分のコードを以下のように書き直しました。（丸パクリ）
/etc/nginx/nginx.conf
location /createImage/ {
proxy_hide_header Access-Control-Allow-Origin;
add_header Access-Control-Allow-Origin *;
proxy_hide_header Access-Control-Allow-Headers;
add_header Access-Control-Allow-Headers *;
proxy_hide_header Access-Control-Allow-Methods;
add_header Access-Control-Allow-Methods *;
add_header Access-Control-Allow-Credentials true;
add_header 'Content-Type' 'application/json';
limit_except GET POST {
deny all;
}
proxy_pass http://localhost:8000/createImage;
}
main.py
app = FastAPI()
origins = [
"http://localhost:3000/"
"http://localhost:8080/"
]
app.add_middleware(
CORSMiddleware,
allow_origins=origins,
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"]
)
nginxを再起動して、uvicornも再起動したのですが、エラーは全く変わりませんでした
React側のコード
Reactも初心者なためコードの書き方怪しいです。セミコロンないのは設定です
react/src/App.js
import './App.css';
function App() {
const json = require("./a.json")
async function fetchApi(){
let encodeJson = encodeURI(JSON.stringify(json))
let responce = await fetch(`https://example.com/createImage/?data=${encodeJson}`, {
method: 'POST',
mode: "cors",
headers: {
"Content-Type": "application/json"
},
})
console.log(responce)
};
return (
<div className="App">
<button onClick={fetchApi}>click me</button>
</div>
);
}
export default App;
0 likes