前提・実現したいこと
React×Redux (port:3000)
Go (port:8080)
でSPAを作っています。
GoのAPIを叩くときにCROSのエラーに遭遇してしまいます。
この問題は何度も遭遇しており、解決したと思ったら新しいAPIを叩く度に直面します。
基本的な設定は行なっているはずなのですが、何が原因かわからず困っています。
お力を貸して頂けると幸いです。
発生している問題・エラーメッセージ
Access to XMLHttpRequest at 'http://localhost:8080/login' 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.
こちらはloginAPI(post)を叩いた時に遭遇しました。
しかしながら、何度かこの問題にぶつかった時にapiのheaderとaxios側でcrosの設定をし、
別のgetAPIではエラーを回避しました。
またpostmanでapiを叩いた時headerに
Allow-OriginなどGoで設定したheaderが問題なく付与されている事も確認しております。
該当のソースコード
Goでのheader設定
go
1 w.Header().Set("Content-Type", "application/json") 2 w.Header().Set("Access-Control-Allow-Origin", "http://localhost:3000") 3 w.Header().Set("Access-Control-Allow-Credentials", "true") 4
react axiosの設定
axios.defaults.baseURL = 'http://localhost:8080'; axios.defaults.headers.post['Content-Type'] = 'application/json';
エラーが出ているpostしているコード
react
1export const signIn = (email, password) => { 2 return async (dispatch) => { 3 try { 4 const response = await axios.post('/login', { 5 email: email, 6 password: password, 7 }); 8 const data = response.data; 9 dispatch( 10 signInAction({ 11 isSignedIn: true, 12 }) 13 ); 14 } catch (error) { 15 console.log(error); 16 } 17 }; 18};
成功しているgetapiを叩いているコード
react
1 useEffect(() => { 2 async function fetchTickers() { 3 try { 4 const response = await axios.get(`/ticker?symbol=^skew`); 5 const data = response.data; 6 setChartAry([...chartAry, [...data.daily]]); 7 } catch (error) { 8 console.log(error); 9 setChartAry([]); 10 } 11 } 12 fetchTickers(); 13 }, []);
試したこと
Qiitaなどでヒットする解決作は一通り試しました。
また、ブラウザ自体の問題の可能性も考え,キャッシュクリアなども行いました。
getとpostによるaxiosの違いでしょうか?
また、どのようにデバッグすればよろしいでしょうか?
ご教示頂けると幸いです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。