CORSでJSからAPIを叩けない

現在フロントのHTMLからAPIを叩いてメールを送信しようとしています。
しかし、送信ボタンを押すと下記のようなエラーがコンソールに出力されます
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

このエラーをググったところ今いるURLから他のURLにリクエストを送ることができないようになっていると書かれてありました
そのためこれを回避するために下記のようのコードを書いたのですが、どうもエラーが解消されません。
どのように書いたらAPIを叩けるのか教えていただきたいです。

JS
1const button = document.getElementById("button");
2button.addEventListener("click", function(e) {
3
4    e.preventDefault();
5
6    const name = document.getElementById('name').value;
7    const subName = document.getElementById('subName').value;
8    const companyName = document.getElementById('companyName').value;
9    const pref_name = document.getElementById('pref_name').value;
10    const location = document.getElementById('location').value;
11    const companyLocation = document.getElementById('companyLocation').value;
12    const tellNumber = document.getElementById('tellNumber').value;
13    const mailAddress = document.getElementById('mailAddress').value;
14    const question = document.getElementById('question').value;
15
16    function sendmail(subject, body) {
17        return fetch('MY-API', {
18            method: 'POST',
19            mode: 'cors',
20            headers: {
21                'Accept': 'application/json',
22                'Content-Type': 'application/json'
23            },
24            body: JSON.stringify({ subject, body })
25        }).then(onLoadFunc);
26    }
27    sendmail(name,subName,companyName,pref_name,location,companyLocation,tellNumber,mailAddress,question);
28});

回答2件

ベストアンサー

そのエラーはレスポンスにAccess-Control-Allow-Originヘッダが返ってこないせいで起きます。
つまり原因はAPI側です。
API側のレスポンスにAccess-Control-Allow-Originヘッダを返してあげてください。

このへん参考になるかと。
Cross-Origin Resource Sharing(CORS)を使用したHTTPリクエスト

投稿2018/09/05 13:12

spookybird

総合スコア1803

CORSというのは、異なるオリジン（スキーム+ホスト+ポート番号）からXMLHttpRequestやFetchなどでアクセスするためのセキュリティ保護の機能です。自由にアクセスを許してしまうと、情報漏えいやリソースの不正理由をされるので、API側で明示的に許可を与える必要があります。Access-Control-Allow-Originもそうですが、今回のケースでは、それに加えて、プリフライトリクエストに対する応答も必要です。

ただ、気になることとして、このJavaScriptのオリジンは http://localhost:63342 のようですね。APIも同じlocalhostの異なるポートで動いているのでしょうか? もしも外部のAPIを利用するのであれば、オリジン http://localhost:63342 に許可を与えることはないと思いますので、気になりました。

投稿2018/09/05 14:01