web-dev-qa-db-ja.com

CORSヘッダー「Access-Control-Allow-Origin」は一致しません...しかし、一致します!

Javaで非常にシンプルなJSON APIを作成しています。オブジェクト座標を提供するのは、実際にはProject Zomboid modです。これは私のHTTPハンドラがどのように見えるかです:

public class JSONZomboid implements HttpHandler
{
    @Override
    public void handle(HttpExchange t) throws IOException {
        // HEADERS
        Headers headers = t.getResponseHeaders();
        headers.set("Content-Type", "text/json");   
        headers.set("Access-Control-Allow-Origin", "pzmap.crash-override.net");                 
        t.sendResponseHeaders(200,0);
        //BODY
        OutputStream os = t.getResponseBody();
        os.write("{\n".getBytes());
          // generate JSON here
        os.write("}".getBytes());
        os.close();
    }
}

Userscriptを使用してProject Zomboidマッププロジェクトにこれをロードしたいのですが、これはCORSが接続できるようにする必要があることを意味します。これは簡単なコードを介して行われます:

PlayerRenderer.prototype.fetchInfo = function() {
  $.get("http://127.0.0.1:8000/test", {}, this.displayPoints.bind(this));
}

しかし、私はこのエラーを受け取ります:

警告:Cross-Origin Request Blocked:Same Origin Policyは http://127.0.0.1:8000/test のリモートリソースの読み取りを許可していません。 (理由:CORSヘッダー「Access-Control-Allow-Origin」が「pzmap.crash-override.net」と一致しません)。

コンソールでも、エラーが誤解を招くのがはっきりわかります。

image description

CORSがまだ嫌いじゃなかったら、今から嫌いになりそうです。 allow Originヘッダーに属する実際の文字列は何ですか?

上記のコメント#1は正しいです。CORSは、Access-Control-Allow-Originヘッダーがクライアントの元のリクエストと一致する必要があります(エンドツーエンドSSLエクスペリエンスの場合)。したがって、この場合は、必ずAccess-Control-Allow-Originヘッダーでpzmap.crash-override.netを設定してください。

2つのメモ:

1-オンラインで何を読んでも、nginxは現在、複数のエントリを個別の行としてリストする必要があります:la:add_header Access-Control-Allow-Origin " https://developers.google.com " ; add_header Access-Control-Allow-Origin " https://imasdk.googleapis.com ";

2-また、オンラインで何を読んでも、ワイルドカードを使用することはできません。すべてのクライアント(ブラウザを意味する)では許可されていません。

2
pozcircuitboy

私は何時間もこれと同じ問題に取り組んできましたが、Originの最後にスラッシュを追加したことがわかりました:https://foo.com/、それがあるべきだったときhttps://foo.com。 (主な顔の手のひらの瞬間について話してください!)

My(now working)Express Node.JS setup:

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors({
  methods: 'GET,POST,PATCH,DELETE,OPTIONS',
  optionsSuccessStatus: 200,
  Origin: 'https://foo.com'
}));
app.options('*', cors());
1
Steve Brush

実際の問題は、Access-Control-Allow-Originヘッダーには、ホスト名だけでなく、プロトコルも含める必要があります。 Webブラウザーがこの部分をエラーメッセージに単に含めた方がはるかに良いでしょう。

上記のように、次のようにします。

headers.set("Access-Control-Allow-Origin", "http://pzmap.crash-override.net");  
1
zeroimpl