Reactにて xxx has been blocked by CORS policy というエラーが出ます。２

Question

前提

こちらのCORS問題にて
依頼人にバックエンド側で対応をお願いしたのですが
私の知識が足りないせいか、
ちょっと下記の内容の会話がわからないでおります。
これは
Reactから直接Backendを叩くと
CORS問題でブロックされるから
その間にPythonを挟んで
そのPythonにBackendとReactの橋渡しをしてもらえということなのでしょうか？
（可能なのかは不明ですが。。。）

ーー以下会話内容ーーー

＊依頼人
「corsの問題を克服するためにバックエンドを実装できますか?」

＊自分
「Backend を作ったのは誰で、どの言語ですか?」

＊依頼人
「いや、そうではなく、フロントエンドのバックエンド
実際のバックエンドではなく、プロキシとして機能するフロントエンド バックエンド
実際のバックエンドは触ることはできません。
このバックエンド プロキシは Python で実装できます。」

実現したいこと

Emailとパスワードでログインできる
Login.jsというページを作りたい

発生している問題・エラーメッセージ

Access to XMLHttpRequest at 'https://login.xxx.com/login' from origin 'http://localhost:3002' 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.

該当のソースコード

import React, { useState, useEffect, useRef } from 'react';
import { useCookies } from 'react-cookie';
import axios from 'axios';
import { useForm } from "react-hook-form";
import  { useHistory } from 'react-router-dom';
import { apiURL } from './Default';
import logo_image from "../images/logo/logo.png";
import { useParams, Link } from 'react-router-dom'
import { useDispatch } from "react-redux";
import background from "../images/background/BG.png";
import '../App.css';

import { isLoggedInOn } from "../stores/user";
import { setUserID } from "../stores/user";

const Login = () => {
  const history = useHistory();
  const dispatch = useDispatch();
  const [cookies, setCookie] = useCookies();
  const { register, handleSubmit, watch, errors } = useForm();
  
  const getJwt = async (data) =>{

        console.log(data)
        axios.defaults.headers.get['Access-Control-Allow-Origin'] = '*';
        await axios.post(`https://login.xxx.com/login`,
          {
            username:data.email,
            password:data.password,
          },

        )

        .then(function (response) {

          console.log(response.data.access)

          setCookie('accesstoken', response.data.access, { path: '/' }, { httpOnly: true });

          setCookie('refreshtoken', response.data.refresh, { path: '/' }, { httpOnly: true });

          dispatch(isLoggedInOn());

          history.push('/');
        })
        .catch(err => {
            console.log("miss");
            alert("Email or Password is wrong!");
        });
      };

  return (
    <div className="container">
    <div className="row mx-auto">
      <div className="col-md-4 mx-auto text-center">
          <div className="row mx-auto logo_image">
            <img className="" src={logo_image} alt="" />
          </div>
          <div className="login-block">
            <form onSubmit={handleSubmit(getJwt)}>
              <input placeholder='Email Address' className='form-control' {...register('email')} />
              <input placeholder='Password' className='form-control' type="password" {...register('password', { required: true })} />
              <Link to={`/`} style={{color: "white"}}>Reset password</Link><br></br>
              <input className='btn btn-block btn-primary col-12' type="submit" value="Login" />
            </form>
          </div>
          <div className="register-block">
            <p style={{color: "white"}}>Don't have an account yet?</p>
            <Link to={`/signup`} className='btn btn-secondary col-12'>Register</Link>
          </div>
      </div>
    </div>
    </div>




  );
}
export default Login;

試したこと

フロント側でCORS問題を解決するため
下記のコードを記載
axios.defaults.headers.get['Access-Control-Allow-Origin'] = '*';

また、念の為、ブラウザのプラグインを使用し、アクセス許可をしましたが
それでも同じエラーになります。。

補足情報（FW/ツールのバージョンなど）

Postmanでも試してみました。

Comments

[hoshi-takanori]

React で書いたものを最終的にバックエンドと同じサイトにデプロイするなら、開発中だけ何とかすれば良いので、webpack の proxy 機能が使えるかも。
https://qiita.com/popo62520908/items/3d5dc6872e4f3ed78c00

そうでないなら、ちゃんとした cors proxy が必要ですね。python なら
https://github.com/bulletmark/corsproxy
とかあるみたいですが、どこにどうやってデプロイするかが問題になりそう…。

[maisumakun]

> フロント側でCORS問題を解決するため下記のコードを記載

Access-Control-Allow-Originはレスポンスに含めるべきものであり、リクエストに入れても何の意味もありません。

[Tomato_leaf]

ありがとうございます。
なんとか編集の方法で解決することができました！

[hoshi-takanori]

それは解決になってないのでは…。

Answer 1

ターミナルにて下記のコマンドで、CORSを無視できるブラウザを立ち上げ
そこからURLにアクセスすることで
一旦、CORS問題は回避することができました。

open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args --user-data-dir="/tmp/chrome_dev_test" --disable-web-security