GETリクエストの代わりにオプションリクエストを取得するのはなぜですか?
-
12-09-2019 - |
質問
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script>
$.get("http://example.com/", function(data) {
alert(data);
});
</script>
そのURLにオプションリクエストを行い、その後、コールバックが何も呼び出されません。
クロスドメインではない場合は、正常に機能します。
jqueryは、aで電話をかけるべきではありません <script>
ノードしてから、ロードされたときにコールバックを行いますか?結果を得ることができないことを理解しています(それはクロスドメインであるため)が、それは大丈夫です。電話を通過したいだけです。これはバグですか、それとも私は何か間違ったことをしていますか?
解決 2
他のヒント
によると MDN,
プレイライトされたリクエスト
単純なリクエスト(上記で説明)とは異なり、「プリライトされた」リクエストは、実際のリクエストが安全かどうかを判断するために、最初にHTTPオプションリクエストヘッダーを他のドメインのリソースに送信します。クロスサイトのリクエストは、ユーザーデータに影響を与える可能性があるため、このように予測されています。特に、次の場合、リクエストが予定されています。
- 取得または投稿以外の方法を使用します。また、postを使用して、アプリケーション/x-www-form-urlencoded、multipart/form-data、またはtext/plain以外のコンテンツタイプの要求データを送信する場合、post要求がサーバーにxmlペイロードを送信する場合Application/XMLまたはText/XMLを使用して、リクエストが予定されています。
- リクエストにカスタムヘッダーを設定します(たとえば、リクエストはx-pingotherなどのヘッダーを使用します)
あなたがしようとしているなら 役職
確実にしてください JSON.stringify
フォームデータとASを送信します text/plain
.
<form id="my-form" onSubmit="return postMyFormData();">
<input type="text" name="name" placeholder="Your Name" required>
<input type="email" name="email" placeholder="Your Email" required>
<input type="submit" value="Submit My Form">
</form>
function postMyFormData() {
var formData = $('#my-form').serializeArray();
formData = formData.reduce(function(obj, item) {
obj[item.name] = item.value;
return obj;
}, {});
formData = JSON.stringify(formData);
$.ajax({
type: "POST",
url: "https://website.com/path",
data: formData,
success: function() { ... },
dataType: "text",
contentType : "text/plain"
});
}
JqueryがそのようなURLを与えられたときにJSONP要求を自然に行うとは思わない。ただし、コールバックに使用する引数を伝えると、JSONPリクエストが行われます。
$.get("http://metaward.com/import/http://metaward.com/u/ptarjan?jsoncallback=?", function(data) {
alert(data);
});
その引数を使用するのは完全に受信スクリプト次第です(「JsonCallback」と呼ぶ必要はありません)。この場合、関数は決して呼び出されません。しかし、あなたはMetaward.comのスクリプトを実行したいと述べたので、それはそれを作るでしょう。
実際、セキュリティ上の理由により、クロスドメインAJAX(XMLHTTP)リクエストは許可されていません(クライアント側から「制限された」ウェブページを取得してサーバーに送り返すことを検討してください。これはセキュリティの問題になります)。
唯一の回避策はコールバックです。これは次のとおりです。新しいスクリプトオブジェクトを作成し、srcをエンドサイドJavaScriptに向けます。これはJSON値(myFunction({data})のコールバックであるため、myFunctionはデータを使用して何かを行う関数です(たとえば、保存します。変数)。
「アプリケーション/json」を「テキスト/プレーン」に変更するだけで、json.stringify(リクエスト)を忘れないでください。
var request = {Company: sapws.dbName, UserName: username, Password: userpass};
console.log(request);
$.ajax({
type: "POST",
url: this.wsUrl + "/Login",
contentType: "text/plain",
data: JSON.stringify(request),
crossDomain: true,
});
同じ問題がありました。私の修正は、開発環境にのみ存在するPHPスクリプトにヘッダーを追加することでした。
これにより、クロスドメインリクエストが可能になります。
header("Access-Control-Allow-Origin: *");
これにより、プリフライトリクエストに、クライアントが必要なヘッダーを送信しても問題ないことがわかります。
header("Access-Control-Allow-Headers: *");
これにより、リクエストを変更する必要はありません。
開発者データベースに漏れられる可能性があるため、機密データがある場合は、これについて二度考えるかもしれません。
FirefoxとOpera(Macでもテストされている)のように見えます(しかし、Safariはそれで問題ありません)。
リモートページをカールするには、ローカルサーバーサイドコードを呼び出す必要がある場合があります。
私の場合、同じWebサーバーにJQuery Postを発行していたため、この問題はCORSとは無関係でした。データはJSONでしたが、データ型:「JSON」パラメーターを省略していました。
上記のDavid Lopesの回答に示されているように、コンテンツタイプのパラメーターを持っていませんでした(も追加しませんでした)。
次のヘッダーの助けを借りて修正することができました
Access-Control-Allow-Origin
Access-Control-Allow-Headers
Access-Control-Allow-Credentials
Access-Control-Allow-Methods
nodejsを使用している場合は、コピー/貼り付けできるコードを次に示します。
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin','*');
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
res.header('Access-Control-Allow-Credentials', true);
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH');
next();
});