Axios: クロスサイトPOSTを機能させることができません

さらに、構成でwithCredentialsをtrueに設定しています。

私もこの問題に遭遇しましたが、Macでしか発生しないようです。 私はネットワークのデバッグに3日間と夜を費やし、気まぐれにバニラXHRリクエストを使用してこれを試すことにしました。問題は私のネットワークではなく、axiosであることに気付きました。

私も、クレデンシャルをtrueに設定してクロスサイトリクエストを行っています。 ネットワークリクエストを見ると、ERR_EMPTY_RESPONSEが表示され、ブラウザを離れる前にリクエストが失敗したように見えます。

これは私の設定です：

const myApi = axios.create({
  baseURL: 'http://someUrl/someEndpoint',
  timeout: 10000,
  withCredentials: true,
  transformRequest: [(data) => JSON.stringify(data.data)],
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  }
});'

機会があれば、これをさらに調べてみます。

ああ、私は頭がおかしいわけではない。 :)可能であればこれを調べてください。

私の問題はAxiosとは無関係であることがわかりました。 Cisco Anyconnectは、私のマシンからのオプション要求をブロックしていました...理由は？

クロスドメインリクエストには、追加の設定は必要ありません。 古いIEではXDomainRequestを使用するようにフォールバックします。 https://github.com/mzabriskie/axios/blob/master/lib/adapters/xhr.js#L22

詳細を教えてください。 どのブラウザ、OS、axiosのバージョン、エラーメッセージ。

Jennyについて話すことはできませんが、特にこのライブラリが原因で、Cisco Anyconnectのデフォルトのセキュリティによって要求がブロックされます。つまり、他のセキュリティ設定でもこれが行われる可能性があります。 私はこれを追跡しようとしていますが、今のところ運がありません。

これは、ciscoAnyconnectおよび場合によっては他のVPNクライアントがインストールされているMacでクロスサイトリクエストを行うことで再現できます。

私の環境は次のとおりです。

• アクシオス0.8.1
• エルキャピタン
• クロム
• エラーメッセージ：「要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません。したがって、Origin「 http：// localhost ：3000」はアクセスを許可されていません。」

同じリクエストがcurlで機能することに注意してください。

これを調べてくれてありがとう！

CORSを使用すると、サーバーに対してプリフライトリクエストが行われ、リクエストが許可されているかどうかが確認されます。 ヘッダーAcces-Control-Allow-Origin: *を設定して、リクエストメソッドとしてOPTIONSを含むリクエストにサーバーが応答するようにする必要があります。これにより、任意の発信元からのリクエストが許可されます。 または、特定のオリジンAcces-Control-Allow-Origin: http://example.comのみを許可することもできます。

はい、わかりました。 しかし、サーバーは私のものではありません。 Baas（サービスとしてのバックエンド）を使用しています。 そして、彼らはすでに私のドメインを許可リストに追加しています。 私は、上記のバースを使用している他の人々がそのような問題を抱えていないことを確認しました。

私はあなたが提供したエラーメッセージを消し去っていますが、それに基づいて、あなたのbaasがあなたのために働いているようには聞こえません。 クロスオリジンセキュリティはブラウザ内の制限にすぎないため、curlを使用しても失敗しません。

ブラウザで[ネットワーク]タブを開き、OPTIONSリクエストへの応答として取得したものを共有できますか？ 応答データとヘッダーを確認することで、この問題のデバッグに役立つことを願っています。

ありがとう

ヘッダーは次のとおりです。

axiosを使用してAPIからユーザープロファイルを取得したときのGitHubからの応答ヘッダーは次のとおりです。

GitHubがAccess-Control-Allow-Origin: *追加していることがわかります。 Baasからの応答には、 Access-Controlタイプのヘッダーがありません。

うーん、見えます。 返信が遅くなってすみません。 これについてもう少し詳しく見てみましょう。 どうもありがとうございました。

私が見ているものが関連しているかどうかはわかりません。 基本的に、認証リクエストをリモートサーバーに送信してCookieを取り戻すことはできますが、その後のサーバーへの呼び出しではCookieが一緒に送信されないため、エラーが発生します。

ログインへのPOST呼び出しのヘッダーは次のとおりです。

そして今、フォローアップGET呼び出し：

origin下にリストされているIPアドレスは私自身のものなので、問題にはならないはずです。 これが間違った場所である場合は、新しい問題を作成するか、適切な既存の問題に添付してください。

新しいしわとして; ストレートXHRを使用してフォローアップGET呼び出しをテストしましたが、Cookieは問題なく送信されます。 ただし、Axiosを介して同じ呼び出しを行うと、上記と同じ問題が発生します。

うーん。 無視してください-私はAxiosを介して期待どおりに物を送っていませんでした:)

私も同じ問題に直面しています。
オプションコールは通過しますが、POSTコールはcorsにスタックします。
http://stackoverflow.com/questions/36907693/axios-cors-issue-with-github-oauth-not-getting-access-token

そのような巨大な問題はどのように対処されていないのですか？

+1

+1

+1

+1

+1

+1

+1

@dsacramoneあなたが見ている問題は何ですか？ 報告されている問題のほとんどは、サーバーの問題または誤警報のようです。 私が見ることができる再現可能なエラーがある場合、私は修正に取り組んでうれしいです。

これも取得

XMLHttpRequestはhttps://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=fishを読み込めませんOrigin'http：// localhost ：3000 'へのアクセスは許可されていません。

また、フェッチを使用してメモを取得します。 私はそのクロームが最近彼らのリクエスト設定ポリシーをより厳格にしたと思います、私はそれが何らかのヘッダーを必要とするだろうと思います（何をするのかわかりません）。

ここにいくつかの例があります（両方ともhttps経由で提供されます）

例1-正常に動作する

axios.get('https://randomuser.me/api/')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

例2-機能していません-エラーが表示されていますか？

axios.get('https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=fish')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

これがエラー応答です

[object Error] {
  config: [object Object] {
    data: undefined,
    headers: [object Object] { ... },
    maxContentLength: -1,
    method: "get",
    timeout: 0,
    transformRequest: [object Object] { ... },
    transformResponse: [object Object] { ... },
    url: "https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=fish",
    validateStatus: function validateStatus(status) {
      return status >= 200 && status < 300;
    },
    xsrfCookieName: "XSRF-TOKEN",
    xsrfHeaderName: "X-XSRF-TOKEN"
  },
  response: undefined
}

関連する可能性のあるものがtransformResponseにありますか？ PROTECTION_PREFIXビットが何を意味するのか疑問に思っていますか？

[object Object] {
  0: function transformResponse(data) {
      /*eslint no-param-reassign:0*/
      if (typeof data === 'string') {
        data = data.replace(PROTECTION_PREFIX, '');
        try {
          data = JSON.parse(data);
        } catch (e) { /* Ignore */ }
      }
      return data;
    }
}

試しても

モード： 'no-cors'
フェッチでもこのエラーが発生します

答えは非常に単純で、ある種のヘッダーが必要なだけで、何が必要かわからないと思います。

ウィキペディアのAPIはちょっと変わった例かもしれませんが、他の人にも同じエラーがありますか？

このコードを削除すると、機能します：axios.defaults.withCredentials = true

ウィキペディアのAPIをjsonpで正常に動作させることができました

var jsonp = require('jsonp');

// search for 'frog'
jsonp('https://en.wikipedia.org/w/api.php?action=opensearch&search=frog&format=json', null, function (err, data) {
  if (err) {
    console.error(err.message);
  } else {
    console.log(data);
  }
});

追加の構成は必要ありません。

axiosで同じエラーが発生します。 これが私のReactコンポーネントです：

import React, { Component } from 'react'
import axios from 'axios'

export default class User extends Component {
  constructor(props){
    super(props)

    // axios.defaults.withCredentials = true

    const config = {
    method: 'get',
    url: 'https://api.airbnb.com/v2/users/2917444?client_id=3092nxybyb0otqw18e8nh5nty&_format=v1_legacy_show',
    headers: {'X-Requested-With': 'XMLHttpRequest'},
    responseType: 'json',
    withCredentials: true,
  }

    axios.request(config)
      .then(response => { console.log('response: ', response) });

  }

  render() {
    return (
      <div>User</div>
    )
  }
}

_注：ノードリクエストでAPIを完全にヒットできます。_

@Sinistralisと同じエラーが発生してnet::ERR_EMPTY_RESPONSEを受け取ります（私のサーバーは、OPTIONSを含むすべてのCORSヘッダーを正常に処理します）。 iOS10サファリでは、まったく同じコードが問題なく機能するため、これは奇妙なことです。 これがどのように解決されるかを確認するために、私自身でもう少し調査を試みます。

最新バージョンのchromeを搭載した古いMac（10.11）では、まったく同じコードでこのエラーを再現することはできません。 これは確かに非常に奇妙です。 http://lights.suyashkumar.comにアクセスし、コンソールを検査することで再現できる場合があります（コードはここにあり

私のエラーを解決しました。 私にとっては、アプリケーションの開始時にnull値を持つconfig.headersヘッダーを割り当てる際の問題でした（ローカルストレージから値を引き出し、最初は何もありません）。 値がnullのときに値を空の文字列に割り当てると、問題が解決します。 これはaxios内で処理できる、または処理する必要があるものかどうか疑問に思います（xhrが_時々_壊れた場合にnullヘッダーをxhrに渡すことに価値があるかどうかはわかりません）。

同様の問題を抱えている他の人たちのために、私はいくつかのVPNクライアントがOPTIONSリクエストをブロックすることもできることを発見しました（ここを参照）

誤解を招くCORSエラーはまだaxiosにあります。 fetchポリフィルは、この問題を修正するためにmode: 'no-cors'をサポートします。

私たちが運用している他の環境のマシンや、異なるポートの同じマシンに対してリクエストを行うには、この種のリクエストを行う必要があります。

@drekiあなたが言及した問題の説明を提供してください。

サーバーがオリジンからのリクエストを単に受け入れない場合、クライアント側で何かを行うことはできません。 可能であれば、ここでセキュリティリークが発生する可能性があります（「私たち」とはインターネット全体を意味します）...

アクシオスはここで完全に一致して行動し、反応すると思います。

重要なResponseヘッダーはAccess-Control-Allow-Originこれは基本的に、このサーバー側サービスを呼び出すことができる有効なオリジンを設定します。 クライアントがこれらの設定された発信元のいずれからも呼び出していない場合、要求は次のようなコンソールエラーで拒否されます。

XMLHttpRequestはhttp：// localhost ：8080 / v1 / api / search？q = candlesをロードできません。 要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません。 したがって、Origin'http ：// localhost ：9999 'へのアクセスは許可されていません。

あなたはゲストリストに載っていません。

私の問題を修正しました。
localhost:8080 vueアプリからlocalhost:3000エクスプレスAPIにアクセスしようとしましたが、エラーが返されていました。
それを機能させるには、 http://を追加する必要があることがわかりました。
だから、使うhttp://localhost:3000の代わりにlocalhost:3000のdevのテストを行うとき。

私はwikmediaapiで同じ問題を抱えていました。 彼らのCORSページ（https://www.mediawiki.org/wiki/Manual:$wgCrossSiteAJAXdomains）を調べて、リクエストにorigin = *を追加したところ、問題が修正されました。

axios.get('https://en.wikipedia.org/w/api.php?action=opensearch&format=json&origin=*&search=Albert') .then(function(res) { console.log(res); }) .catch(function(err) { console.log('Error: =>' + err); })

恐ろしいcorsエラーメッセージが表示されましたが、リクエストがサーバーにヒットしていました。

XMLHttpRequest cannot load "...url here...". No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

アクシオスチーム、修正していただけませんか？

@mellogarrettこれはください： //developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

重要な引用：

「セキュリティ上の理由から、ブラウザはスクリプト内から開始されるクロスオリジンHTTPリクエストを制限します。たとえば、XMLHttpRequestとFetchは同一生成元ポリシーに従います。したがって、XMLHttpRequestまたはFetchを使用するWebアプリケーションは、独自のドメインに対してのみHTTPリクエストを作成できます。 Webアプリケーションを改善し、開発者はブラウザベンダーにクロスドメインリクエストを許可するように依頼しました。」

この問題を抱えている人の多くは、おそらくサーバーがOPTIONSリクエストに応答していません。 OPTIONSリクエストとPOSTリクエストの両方にハンドラー（CORSヘッダー付き）があることを確認してください。 クライアント（axios）は最初にOPTIONSにpingを実行し、次にPOSTを実行します。

Firefoxでも同じエラーが発生しますが、Chromiumでは発生しません。 次に、NoScriptが（Firefoxに）リモートサーバーへの要求を妨げていたことを思い出しました。 NoScript（または同様のプラグイン）がインストールされている場合は、最初にそれを確認してください。
私の場合、問題はAxiosに関連していませんでした。 素晴らしい仕事をありがとう。

この問題の修正をグーグルで調べている他の人にとっては、私はすべて同じ症状を示しましたが、問題をサーバー上のphp.ini設定にトレースしました。

プリフライトOPTIONSリクエストは成功し、その後に適切なPOSTリクエストが続きましたが、 @ mellogarrettと同様のNo 'Access-Control-Allow-Origin' header is present on the requested resource...を取得していました。 これはまったく奇妙に思えたので、 Chromeプラグインを使用してCORS保護を一時的に無効にしました。 その後、問題は実際にはPHPエラーであることがわかりました。

Deprecated: Automatically populating $HTTP_RAW_POST_DATA is deprecated and will be removed in a future version. To avoid this warning set 'always_populate_raw_post_data' to '-1' in php.ini and use the php://input stream instead. in Unknown on line 0

この投稿には問題に関する詳細情報がありますが、要するに、PHP 5.6を使用している場合は、php.iniのalways_populate_raw_post_dataコメントを外し、 -1設定する必要があります。 これにより、他の誰かがトラブルシューティングの数時間を節約できることを願っています🤓

ねえ@daltonamitchell私は同じ問題を

@ RT-TLプラグインは、CORSがブロックせずに応答コンテンツを表示するためにのみ使用されます。 私の場合、テスト目的でHello Worldような文字列を返すだけだったので、CORSを無効にすると、次のようなものが表示されました。

Deprecated: Automatically populating $HTTP_RAW_POST_DATA is deprecated and will be removed in a future version. To avoid this warning set 'always_populate_raw_post_data' to '-1' in php.ini and use the php://input stream instead. in Unknown on line 0
Hello World

コントローラメソッドの先頭にerror_reporting(E_ERROR | E_WARNING | E_PARSE | E_NOTICE)またはerror_reporting(E_ALL)を追加して、 PHP警告が有効になっていることを確認してください。 それでも何も表示されない場合は、単純なJSON応答を返して、期待どおりに表示されることを確認してみます。

誰かがまだこの問題を経験していますか？ 私は同じことに遭遇しています：

const instance = axios.create({
    baseURL: 'http://localhost/',
    responseType: 'json',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        'Authorization': 'test',
        'X-Test': 'testing'
    }
})
axios.get('v2/portal/bar/foo?')

応答ヘッダー

HTTP/1.1 401 Unauthorized
Server: nginx/1.11.10
Date: Fri, 24 Mar 2017 07:12:13 GMT
Content-Type: application/json; charset=UTF-8
Content-Length: 0
Connection: keep-alive
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, PUT, DELETE, GET, OPTIONS
Access-Control-Allow-Headers: *

リクエストヘッダー

OPTIONS /v2/portal/bar/foo? HTTP/1.1
Host: localhost
Connection: keep-alive
Access-Control-Request-Method: GET
Origin: http://localhost:3000
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.98 Safari/537.36
Access-Control-Request-Headers: authorization,content-type,x-test
Accept: */*
Referer: http://localhost:3000/dashboard/report
Accept-Encoding: gzip, deflate, sdch, br
Accept-Language: en-US,en;q=0.8,fr;q=0.6,nl;q=0.4,zh-TW;q=0.2,zh;q=0.2,zh-CN;q=0.2

ヘッダーが正しく送信されない理由がわかりません。

ここでも同じ問題があり、OPTIONSリクエストは行われますが、POSTリクエストは行われません。

TLDR：フェッチは機能しますが、 JSON.stingifyを使用しない限り、axiosは機能しません

そのため、OPTIONSがクロスオリジンリクエスト用にヘッダーを設定して200を返すというこのエラーのバリエーションも確認しましたが、POSTは行われません。 この拡張機能を使用すると、期待どおりに

サーバーがAccess-Control-Allow-Origin: *応答しています
コードとスクリーンショットを含むすべての例を次に示します。

アクシオス：

axios.post('http://localhost:3001/card', { test: 'test' })

フェッチ：

    return fetch('http://localhost:3001/card', {
      method: 'POST',
      body: { test: 'test' },
    })

JSON.stringify

    return fetch('http://localhost:3001/card', {
      method: 'POST',
      body: JSON.stringify({ test: 'test' }),
    })

データを次のようにJSON.stringify ingすることで、axiosを機能させることができました。

    return axios.post('http://localhost:3001/card', JSON.stringify({ test: 'test' }));

@kwhitakerが説明したのと同じ問題に直面していました@ zlyiが提案したように、 axios.defaults.withCredentials = true;という行を追加すると、すべてが期待どおりに機能し始めました。

すべてを試しましたが、まだ問題があります。 :(

すべてを試しましたが、まだ問題があります。 :(

.htaccsessに以下を追加することで問題を管理しました：

<IfModule mod_headers.c> 
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type" 
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS" 
</IfModule>

プロキシを使用してこれに対処することができました。 package.jsonプロキシを追加します

{
    "proxy": "http://some-url/some-endpoint"
}

次に、リクエストします。

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response)
  })
  .catch(function (error) {
    console.log(error)
  })

これはサーバー側の問題であり、応答ヘッダーに'Acces-Control-Allow-Origin': '*'を含める必要があります。 Expressを使用している場合は、 npm-corsを使用してより堅牢でエレガントな実装を行うことができます。

+1 @ProfNandaa
ローカルサーバーにエクスポートを作成しました

# cors.js file
module.exports = (req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
}

だから私は割り当てます：
`` `
const cors = require（ 'cors'）;
router.use（cors）;
`` ``
さあ、先に進みましょう...ありがとう

サーバーがOPTION要求を受け入れない場合、エラーが発生します。

「サーバーにOPTIONリクエスト処理を追加する」とコメントしている場合は、機能しません。 OPTIONリクエスト処理が有効になっているローカル環境を実行しています。

この問題は、上記のユーザーと同じように発生しました。 Axios.post(url, obj)はCORS 403禁止エラーを返しましたが、 Axios.post(url, JSON.stringify(obj))更新すると正しく機能しました。

私は単純なチュートリアルプロジェクトに取り組んでおり、さまざまなAPIにアクセスするのに問題がありました。 私がうまくいくとわかった唯一の解決策は、上記のthiagodebastosによって言及されたものです。

getの代わりにjsonpを使用するだけで、データにアクセスできました。

私はこの問題を抱えていました、そしてkoa-corsは簡単な解決策でした！ （npm-ProfNandaaによるExpressユーザーのcors）

これでまだ問題が発生している場合： Axiosは、COR 、OPTIONSリクエスト、 JSON.encodedなしでリクエストの本文として送信されるJSON、およびAxiosと要求に応答するサーバーは適切に構成されています。

苛立たしい試行錯誤が必要でしたが、Axiosで正常に機能するクロスドメインリクエストがあります。

いくつかのポイント：

リクエストが機能するためには、

• サーバーはOPTIONS要求に応答します。これは、応答が200以外で、すべての正しいヘッダーが設定されている場合と同様に、 「プリフライト」要求は失敗します。

• リクエストは正しいヘッダーで行われ、サーバーは必要なすべてのヘッダーで応答します。

• Cookie /承認ヘッダーまたはTLSクライアント証明書が必要な場合は、Axios要求に対してallowCredentialsをtrueに送信します。 これは、デフォルト（ axios.defaults.withCredentials = true ）またはリクエストごとに実行できます。

成功したリクエストヘッダーの例

Access-Control-Request-Headers: Content-Type
Access-Control-Request-Method: GET

成功した応答ヘッダーの例

Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Allow-Methods: GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS
Access-Control-Allow-Origin: http://your-origin-url.com

応答ヘッダーを徐々に追加していくと、さまざまな組み合わせでエラーや予期しない動作を診断するのが困難であることがわかりました。

Access-Control-Allow-Credentials: trueがないと、Cookieは送信または永続化されませんでした。これは、そのヘッダーのMDNページを読んだ後で意味があります。

このドキュメントを読むと役立ちます。

問題を抱えている人は誰でも、 ...Allow-Headers: Content-Typeが重要です。

Access-Control-Allow-Origin: '*'
Access-Control-Allow-Methods: ...
Access-Control-Allow-Headers: Content-Type, Accept

'Allow-Control-Allow-Origin：*'という名前のこのChrome拡張機能を使用しています
それがあなたの問題を助けることができることを願っています。

Axiosがこのエラーを修正できない理由を理解していない人のために：

これはAxiosの問題ではありません。 ブラウザの問題です。 ブラウザのJSは、適切なヘッダーが設定されていないサーバーへのリクエストを拒否します。 クライアントでReactのようなものでこれを使用している場合は、混乱しないでください。これはReactやAxiosの問題ではなく、単にCORS標準を尊重するブラウザです。

JakeElderは、APIのサーバー側で何をする必要があるかについての適切な説明をここに提供します： https ：

アクセスしようとしているサーバーを制御できない場合は、コンテンツをフェッチして正しいヘッダーで返すプロキシサーバーを作成する必要があります。

なぜこれが実装されたのかわからない。 サーバーに情報を取得するように要求したいが、サーバーに特定のヘッダーが設定されていないためにできない場合は、確かに迷惑です。 非常に制限されているようです。 しかたがない ...

@ robins-eldo繰り返しますが、私はあなたが正しいとは思いません。

私の元のコメント：

For those commenting saying "Add OPTION request handling to your server", that does not work. I'm running a local environment that has OPTION request handling enabled.

I experienced this issue identically as a user above, where Axios.post(url, obj) returned the CORS 403 forbidden error, but updating that to Axios.post(url, JSON.stringify(obj)) worked correctly.

それが実際にサーバーの問題であり、Axiosの問題ではない場合、OPTIONS要求はどちらの方法でも失敗するため、オブジェクトをストリング化しても影響はありません。

@alexanderbanks

OPTION HTTPメソッドについてはよくわかりませんが、私の特定の問題は、作成した内部API（ここでは内部APIがサーバー）にPOSTしようとしているReactクライアントがあることでした。 このエラーが発生し続けました： Failed to load resource: Origin http://localhost:7149 is not allowed by Access-Control-Allow-Origin. XMLHttpRequest cannot load http://localhost:8902/user-login due to access control checks.

Axiosの問題かもしれないと思ったので、代わりにUnirestを試しましたが、同じエラーが発生し続けました。 だから私はそれが何か他のものに違いないと思った。 これがブラウザの問題なのかReactなのかはわかりませんが、APIサーバー（Nodejs + Express API）に以下を追加するとすぐに、クライアント側でAxiosとUnirestの両方ですべてが機能し始めました。

app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); next(); });

おそらく、ここで実際に何が起こっているのかについての私の理解はやや制限されていますが、サーバー上のこのビットのコードは私にとって問題を解決しました。

サーバーがオリジンアクセスを制限しすぎていないことを確認してください。ノーコールを回避したい場合は、次のことを試してください。

    return axios(url, {
      method: 'POST',
      mode: 'no-cors',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      withCredentials: true,
      credentials: 'same-origin',
    }).then(response => {
    })

CORSの仕組みについて混乱している人もいると思います。 ただし、元々の問題はCORSに関するものではなく、少なくともそれが重要な問題であるはずです。 つまり、CORSを適切に構成しているが、投稿が機能しない場合でも、サーバーを適切に構成する方法ではなく、報告する問題です。

APIの動作がおかしい。 すべてのcorsGETリクエストは「credentials：true」で機能していました。
POSTリクエストの場合、同じオリジンリクエストはデータオブジェクトを文字列化せずに機能しますが、CORS POSTリクエストの場合、データオブジェクトを文字列化すると機能し始めます。

正確な理由はわかりませんでしたが、問題は解決しました。

申し訳ありませんが、同じトピックの周りでサークルを行っているように見えるため、このスレッドをロックしています。 別の問題でカバーされていない特定の問題がある場合（設定ミスによる一般的なCORSの問題、フォームのurlencodedではなくJSONとして送信されるPOSTリクエストなど）、特定の詳細を含む新しい問題を開いてください。