web-dev-qa-db-ja.com

Vue.jsでのCORSの問題

私が使用しています：

  • Vue 2.0.3
  • vue-router 2.0.1
  • vuex 0.8.2
  • vue-resource 0.7.0

ローカルで実行するのではなく、リモートAPIを使用しているときに自分のページにログインしようとすると、次のようなCORエラーが発生します

vue-resource.common.js?2f13:1074 OPTIONS 

https://mywebsite/api/auth/login 

(anonymous function) @     vue-resource.common.js?2f13:1074
Promise$1            @     vue-resource.common.js?2f13:681
xhrClient            @     vue-resource.common.js?2f13:1033
Client               @     vue-resource.common.js?2f13:1080
(anonymous function) @     vue-resource.common.js?2f13:1008


XMLHttpRequest cannot load https://mywebsite/api/auth/login. 
Response to preflight request doesn't pass access control check: 
No 'Access-Control-Allow-Origin' header is present on the requested 
resource. Origin 'http://localhost:8080' is therefore not allowed 
access. The response had HTTP status code 415.

これで、AzureでAPIを実行できるようになりました。これにより、Postmanからの呼び出しをテストできるため、CORSヘッダーがバックエンドで適切に設定されていることを確信しています。 Vueとフロントについてはよくわかりません。

私は設定ファイルにこのような状況があります：

export const API_ROOT = 'https://mywebsite/api/'
export const AuthResource = Vue.resource(API_ROOT + 'auth{/action}')

よりも私はこのアクションを次のように呼んでいます：

login: function (userData) {
    return AuthResource.save({action: 'login'}, userData)
}

最後に、vuexサブモジュールのトークンを介してログインで認証をチェックしているので、単純なヘッダーチェックステートがあります。

var updateAuthHeaders = () => {
    var token = JSON.parse(localStorage.getItem("auth_token"))
    if (token != null){
        Vue.http.headers.common['Authorization'] = token
    }else{
        Vue.http.headers.common['Authorization'] = null
    }
}

追加しようとしましたVue.http.headers.common['Access-Control-Allow-Origin'] = trueここで、しかしケースを助けませんでした。

何か案が？何が問題なのでしょうか。ログインで機能しない場合でも、他の呼び出しでは機能しないと思います。

javascriptazurevue.jsvue-resource
9
desicne

1）serverがAccess-Control-Allow-Origin "*"ヘッダーを送信することを確認します。

2）Vue.http.headers.common['Access-Control-Allow-Origin'] = true、Vue.http.headers.common['Access-Control-Allow-Origin'] = '*'などはclientリクエストでは必要ありません。

3）Vue.http.options.emulateJSON = trueは、1ポイントと2ポイントがすでに問題ない場合に役立ちますが、vue-resourceはstatus 0で失敗します。また、（存在する場合）Vue.http.options.credentials = trueとVue.http.options.emulateHTTP = trueを削除してみてください。

3
Nickensoul

Access-Control-Allow-Origin: *を server 応答（この場合はIIS）に追加できますが、これはお勧めできません。

ここで何が起こっているのかは、あなたの client がhttp://localhostであり、https://mywebsite/api/にアクセスしようとしているということです。これは、同じ Origin

Access-Control-Allow-Origin: *を追加すると、全世界がAPIエンドポイントにアクセスできるようになります。

アクセス制御 server ヘッダーAccess-Control-Allow-Origin: *.mysiteを作成し、localhostにvsomeを作成してdev.mysiteなどを使用することをお勧めします。

これにより、「localhost」が問題なくAPIにアクセスできるようになります。

ホワイトリストにlocalhostを追加することもできますが、これには独自のセキュリティ上の影響がないわけではありません。 どこでも機能しない とにかく。

つまり、要するに、RESTサービスと同じドメインにあるlocalhostの仮想ホストを作成すれば、問題は解決するはずです。

稼働したら、*.mysiteの部分を削除し、ホワイトリストで可能な限り特定のドメインを使用する必要があります。

幸運を！

3
darryn.ten

IISでCORSが有効になっていない可能性が高いです。これは、IIS）のアプリケーションルートフォルダーにあるweb.configファイルを次のように変更することで有効にできます。

<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
   <httpProtocol>
         <customHeaders>
           <add name="Access-Control-Allow-Origin" value="*" />
         </customHeaders>
   </httpProtocol>

</system.webServer>
</configuration>

注：この方法では、誰でもAPIエンドポイントに到達できるため、本番環境では採用せず、開発環境でのみ採用する必要があります。

2
Parthipan Natkunam

または、chrome CORS拡張機能を使用して開発目的でバイパスできます。codesandboxで動作します

0
xmp