web-dev-qa-db-ja.com

AngularJSはAccess-Control-Allow-Originヘッダーを検出しませんか？

ローカル仮想ホストでangularアプリを実行しています（ http://foo.app:80 ）。 $http.postを使用して、別のローカルVirtualHost（ http://bar.app:80 ）にリクエストを送信しています。

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

Chrome Developer Toolsの[ネットワーク]タブには、もちろんOPTIONSリクエストが表示され、レスポンスにはヘッダーが含まれています。

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

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

要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません。 Origin ' http://foo.app:80 'はアクセスを許可されていません。

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

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

angularjsangularjs-http
43
TaylorOtwell

ローカル開発者のchromeのバグです。他のブラウザを試してください。その後、動作します。

47
user1469734

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

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

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

26
Rui Afonso Pereira

私はangularjsからリクエストを$ httpサービスを使用して bottlehttp://localhost:8090/で実行し、適用しなければなりませんでした CORS Access-Control-Allow-Origin 'ヘッダーが要求されたリソースに存在します」

from bottle import hook, route, run, request, abort, response

#https://github.com/defnull/bottle/blob/master/docs/recipes.rst#using-the-hooks-plugin

@hook('after_request')
def enable_cors():
    response.headers['Access-Control-Allow-Origin'] = '*'
    response.headers['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS, PUT'
    response.headers['Access-Control-Allow-Headers'] = 'Origin, X-Requested-With, Content-Type, Accept'
7
Gabriel

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>
3
nkharche

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

3
brain_bacon

$ http.get（ 'abc/xyz/getSomething'）を使用する代わりに$ http .jsonp（ 'abc/xyz/getSomething'）

     return{
            getList:function(){
                return $http.jsonp('http://localhost:8080/getNames');
            }
        }
2
Indranil Acharya

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

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

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

2
tacticurv

今日、この問題に遭遇しました。サーバーのバグ（nullポインター例外）が応答の作成に失敗することが判明しましたが、それでも200のHTTPステータスコードが生成されました。200ステータスコードのため、Chrome有効な応答。 Chromeが最初にしたことは、見つからなかった「Access-Control-Allow-Origin」ヘッダーを探すことでした。 Chromeがリクエストをキャンセルし、Angularがエラーを出しました。 POSTリクエストの処理中のバグが、OPTIONSは成功するが、POSTは失敗する理由です。

つまり、このエラーが表示された場合、サーバーはPOSTリクエストへの応答でヘッダーをまったく返さなかった可能性があります。

2
David Hansen

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

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

  headers: 'Authorization' // this line here
0
Umar Rasydan