10

CORSポリシーを考慮してクライアントからAPIにリクエストする2つのドメイン(クライアント用のexample.com、残りのAPI用のapi.example.com)があります。プリフライト リクエストは期待どおりに機能し、他のすべてのリクエスト (GET/POST/PUT/DELTE) はファイル アップロードを除いて正常に機能します。つまり、Content-type が「multipart/form-data」の場合です。

そして、Chrome コンソールに次のエラーが表示されます。

オリジン ' https://www.example.com ' からの ' https://api.example.com/video/upload 'での XMLHttpRequest へのアクセスは、CORS ポリシーによってブロックされました: 'Access-Control-Allow-Origin' ヘッダーはありません要求されたリソースに存在します。

ここに私のクライアント(vuejs)ソース:

var config = {
    headers: { "Content-Type": "multipart/form-data" },
    onUploadProgress(e) {
      if (e.lengthComputable) {
        self.percentage = Math.round(e.loaded / e.total * 100) + "%";
      }
    }
  };

  axios
    .post(apiUrl + `/video/upload`, formData, config)
    .then(response => {
      this.successes.push(
        response.data.videoName + " uploaded."
      );
    })
    .catch(e => {
      this.errors.push(message);
    });
},

CORS の nginx 構成:

server {
listen 443 ssl default_server http2;
listen [::]:443 ssl default_server ipv6only=on;
root /var/www/example/public;
index       index.php index.html index.htm;
server_name api.example.com:443;

add_header Access-Control-Allow-Origin "*" always;
add_header X-Frame-Options "SAMEORIGIN";
add_header X-XSS-Protection "1; mode=block";
add_header X-Content-Type-Options "nosniff";
add_header Access-Control-Allow-Methods "GET, POST, PUT, OPTIONS,  DELETE";
add_header Access-Control-Allow-Headers "Content-Type, X-Auth-Token, Origin, Authorization";

このコードと構成の何が問題なのか誰か教えてください! どんな助けにも感謝します!

4

2 に答える 2