45

ローカル仮想ホスト ( http://foo.app:8000 )で角度のあるアプリを実行しています。を使用して、別のローカル VirtualHost ( http://bar.app:8000 )にリクエストを送信してい$http.postます。

$http.post('http://bar.app:8000/mobile/reply', reply, {withCredentials: true});

Chrome 開発者ツールの [ネットワーク] タブには、もちろん OPTIONS リクエストが表示され、応答にはヘッダーが含まれています。

Access-Control-Allow-Origin: http://foo.app:8000

ただし、POST 要求は次のエラーでキャンセルされます。

要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません。したがって、オリジン「http://foo.app:8000」へのアクセスは許可されていません。

誰もこれを経験しましたか？Access-Control-Allow-Originヘッダーは OPTIONS リクエストの応答に非常に明確に含まれているため、ヘッダーが欠落している POST が機能している理由を一生理解できません。

Access-Control-Allow-Credentialsにも設定されていtrueます。

4

9 に答える 9

26

Chrome を使用したい人のための回避策があります。この拡張機能'Access-Control-Allow-Origin: *'を使用すると、応答にヘッダーが追加されるため、任意のソースから AJAX を使用して任意のサイトを要求できます。

別の方法として、この引数を Chrome ランチャーに追加することもできます: --disable-web-security. これは、通常の「Web サーフィン」ではなく、開発目的でのみ使用することに注意してください。参照については、Run Chromium with Flags を参照してください。

最後に、最初の段落で説明した拡張機能をインストールすることで、CORS を簡単に有効/無効にすることができます。

于 2014-09-20T10:59:00.620 に答える
3

CROS はサーバー側から解決する必要があります。

要件に従ってフィルターを作成して、アクセスを許可し、web.xml にフィルターを追加します。

スプリングを使用した例:

フィルタ クラス:

@Component
public class SimpleFilter implements Filter {

@Override
public void init(FilterConfig arg0) throws ServletException {}

@Override
public void doFilter(ServletRequest req, ServletResponse resp,
                     FilterChain chain) throws IOException, ServletException {

    HttpServletResponse response=(HttpServletResponse) resp;

    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
    response.setHeader("Access-Control-Max-Age", "3600");
    response.setHeader("Access-Control-Allow-Headers", "x-requested-with");

    chain.doFilter(req, resp);
}

@Override
public void destroy() {}

}

Web.xml:

<filter>
    <filter-name>simpleCORSFilter</filter-name>
    <filter-class>
        com.abc.web.controller.general.SimpleFilter
    </filter-class>
</filter>
<filter-mapping>
    <filter-name>simpleCORSFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>
于 2015-06-20T07:26:56.350 に答える
3

これとまったく同じ問題が発生しました。私の場合、OPTIONS リクエストは通過しますが、POST リクエストは「中止されました」と表示されます。これにより、ブラウザが POST リクエストをまったく行っていないと信じるようになりました。Chromeは、リクエストヘッダーに「注意暫定ヘッダーが表示されます」のようなものを言いましたが、応答ヘッダーは表示されませんでした。最後に、Firefox でのデバッグに目を向けたところ、サーバーがエラーで応答しており、応答に CORS ヘッダーが存在しないことがわかりました。Chrome は実際に応答を受信して​​いましたが、応答をネットワーク ビューに表示できませんでした。

于 2014-02-13T22:00:34.483 に答える
2

リクエストのパラメーターが間違っている場合にも発生する可能性があります。私の場合、メッセージを送ったAPIを使用していました

「要求されたリソースに 'Access-Control-Allow-Origin' ヘッダーが存在しません。したがって、オリジン 'null' はアクセスを許可されていません。応答には HTTP ステータス コード 401 がありました。」

ログインするための POST リクエストで間違ったユーザー名またはパスワードを送信した場合。

于 2015-09-26T03:40:04.127 に答える
2

$http.get ('abc/xyz/getSomething') を使用する代わりに、$http.jsonp ( 'abc/xyz/getSomething') を使用してみて ください

     return{
            getList:function(){
                return $http.jsonp('http://localhost:8080/getNames');
            }
        }
于 2016-03-30T23:27:49.213 に答える
0

Sails.js でこの問題が発生している場合は、cors.js を設定して、Authorization を許可されたヘッダーとして含めるだけです。

/***************************************************************************
  *                                                                          *
  * Which headers should be allowed for CORS requests? This is only used in  *
  * response to preflight requests.                                          *
  *                                                                          *
  ***************************************************************************/

  headers: 'Authorization' // this line here

于 2015-11-17T05:32:42.903 に答える