Dva: クロスドメインの問題を取得する

作成日 2016年11月17日  ·  18コメント  ·  ソース: dvajs/dva

モデルレイヤーエフェクトでサービスレイヤーメソッドを呼び出します。コードは次のとおりです。

// 引入service
import { login } from '../services/authentication';
// effects
*login({ payload: { currentUser } }, { select, call, put }) {
      const data = yield call(login, {
        "mobile": currentUser.userName,
        "password": currentUser.password
      });
      console.log('my response data is:', data);

ブラウザビューサーバーの要求は正常ですが、データを出力すると、checkstatusによって生成されたエラーが表示され、checkstatusの前に返される応答は次のとおりです。

body:(...)
bodyUsed:false
headers:Headers
    __proto__: Headers
ok:false
status:0
statusText:""
type:"opaque"
url:""

すみません、何が問題なのですか?ブラウザビューリクエストはステータス200を返しますが、ここで取得したhttpステータスコードは0です。これは私のエフェクトですか、それともフェッチですか?

277ちなみに、ヘッダーの追加の問題はまだ存在します。これはdva6.0のバージョンでもあります。同形フェッチの問題でしょうか?

faq question

最も参考になるコメント

  1. フェッチによってスローされたエラーは問題を明確に特定せず、それがクロスドメインの問題であることを知るためにPromiseソリューション(axios)に変更されました
    2.クロスドメインの問題を簡単に解決し、モードを設定するための投稿をインターネットで見つけました:no-cors、そしていくつかの回り道をしました。
    3.最後に、フェッチの公式ドキュメントを読むことでフェッチをより深く理解し、最後にモードを設定することで問題を解決しました; cors。
    概要:クロスドメインの問題を解決するための鍵は、xhrプロトコルとhttpプロトコルを理解することにあります。モードをCorsとno-corsとして指定する最大の違いは、corsがリクエストを送信する前にオプションsを通過することです。

全てのコメント18件

これは効果の問題ではなく、フェッチに関連している必要があります。クロスドメイン?

クロスドメインリクエストを作成し、それをaxiosに変更してリクエストを作成しました。すべて正常です。クロスドメインをサポートするには、フェッチ用にどのパラメーターを構成する必要がありますか?

特に試したことはありませんが、フェッチのドキュメントを見ると、クロスドメイン処理はXMLHTTPRequestと一致していると言われています。クッキーが持ち込まれなかったという事実と関係があるのでしょうか? https://www.npmjs.com/package/whatwg-fetch#sending -cookies

私のプロジェクトでは、サーバーはGO言語で記述されています。サーバーがクロスドメインをサポート/許可するように構成されている限り、クライアントのフェッチに追加の構成は必要ありません。

@xaviertungは、サーバーログをチェックして問題を分析/特定することを検討できると

2016年11月18日の午前8時30分、chencheng(0022谦) [email protected]は次のように書いています。

特に試したことはありませんが、フェッチのドキュメントを見ると、クロスドメイン処理はXMLHTTPRequestと一致していると言われています。クッキーが持ち込まれなかったという事実と関係があるのでしょうか? https://www.npmjs.com/package/whatwg-fetch#sending -cookies https://www.npmjs.com/package/whatwg-fetch#sending -cookies

このスレッドにサブスクライブしているため、これを受け取っています。
このメールに直接返信するか、GitHub https://github.com/dvajs/dva/issues/282#issuecomment -261413729で表示するか、スレッドhttps://github.com/notifications/unsubscribe-auth/ACv7UniRkGq0Uv8XFBUeNMe5jBeGyWpQks5q_PKgaJpZをミュートし

ありがとう、問題は解決しました、それはモードとクレデンシャル設定の問題です。

それを解決する方法、計画について話しましょう?他の人は後でそれに遭遇するかもしれません。

  1. フェッチによってスローされたエラーは問題を明確に特定せず、それがクロスドメインの問題であることを知るためにPromiseソリューション(axios)に変更されました
    2.クロスドメインの問題を簡単に解決し、モードを設定するための投稿をインターネットで見つけました:no-cors、そしていくつかの回り道をしました。
    3.最後に、フェッチの公式ドキュメントを読むことでフェッチをより深く理解し、最後にモードを設定することで問題を解決しました; cors。
    概要:クロスドメインの問題を解決するための鍵は、xhrプロトコルとhttpプロトコルを理解することにあります。モードをCorsとno-corsとして指定する最大の違いは、corsがリクエストを送信する前にオプションsを通過することです。

@sorrycc先生、クロスドメインフェッチでいくつかの問題が発生しました。フェッチリクエストを使用した後、コンソールに200オプションリクエストが表示されました。バックグラウンドでブレークポイントに入ることができます。判断方法はGET(実際のリクエスト)であり、フロントエンドはresponse.json()を使用します。バックグラウンドデータも取得できますが、コンソールにはGETリクエストのレコードがなく、Optionsのみがあります。ajaxを使用する場合、すべてが正常です。コンソールにはOptionリクエストとGETリクエストの両方があります。

@AsceticBoyは、コンソールに問題があるようですが、フィルタリングが装備されていますか?

@xaviertungクロスサイトフロントエンドはモードを設定するだけで済みます; cors?
ヘッダーに「include」という資格情報を追加しましたが、リクエストが許可されていないというエラーを報告します。
現在、デバッグは面倒です。毎回コストドメインを変更してから、フロントエンドをコンパイルして、デバッグのためにバックエンドプロジェクトに配置する必要があります。
使用するnginx + Tomcat(スプリング)バックエンドを設定するにはどうすればよいですか?ありがとうございました

@wuyongdecは、クロスドメイン構成を許可するためにサーバーが開いているかどうかを確認する必要があります。

@wuyongdecdoraはクロスドメインデバッグをサポートします

@xaviertungサーバーは開かれましたが、クレデンシャル「include」が追加されたときにサーバーが拒否しました。

@jingchenxuドキュメントはありますか?

プロキシが.roadhogrcで構成されていないため、この問題が発生しました。プロンプトもクロスドメインの問題です。

ターゲットのhttp://jsonplaceholder.typicode.com/を独自のサーバーアドレスに変更します
"proxy": { "/api": { "target": "http://jsonplaceholder.typicode.com/", "changeOrigin": true, "pathRewrite": { "^/api" : "" } } }

@wuyongdec私もあなたと同じ問題に遭遇しました、あなたはそれを解決しましたか?それはどのように解決されましたか?

クロスドメイン構成のためにフロントエンドとバックエンドを分離してください! ! !非Cookie認証、JWT認証構成! !
クロスドメインリクエストができないことを解決し、
まず、config.jsでプロキシを設定しないでください。この構成はローカル開発にのみ使用でき、ビルド後に無効になります。

私の計画:
.envで構成します(そうでない場合はルートディレクトリに作成します)
APIをリクエストするときは、サーバーアドレスを読み取ります。 (request.jsを変更)

nghin / apache / phpサーバープラス
add_header Access-Control-Allow-Origin *常に; ###(Nginx 1.7.5以降)

add_header Access-Control-Allow-Methods GET、POST、OPTIONS、HEAD、PUT;
add_header Access-Control-Allow-Headers "Authorization、Content-Type";

フロントエンドフェンチ:
クレデンシャル: 'omit' //これは、Cookieが送信されないことを意味し、クロスドメインリクエストが必要です
ヘッダ:{
承認:localStorage.getItem( 'login-token')、
}

その中で、「認証」とは、サーバー側の認証方法に応じて、さまざまなサーバーのさまざまな構成を指します

ここで私がしたことを記録します。
ドメイン名に一貫性がない場合は、バックエンドがクロスドメインをサポートしていることを確認してください。
200 400 500であっても、Access-Control-Allow-Originおよびその他の情報を伝送する必要があります。
次の2つのパラメータがフェッチヘッダーで運ばれます

{
  mode: 'cors',
  credentials: 'include',
}

nginxサーバーは次のヘッダーを書き込みます

add_header Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Keep-Alive,User-Agent,Cache-Control,Content-Type,Authorization,sbid
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Origin: 你的域名

現時点では、削除後の取得などはすべて正常に機能しますが、
ただし、別の問題が発生すると、nginxは401を返すときにAccess-Control-Allow-Originやその他の情報を失い、401(https://github.com/github/fetch/issues/201)で応答ステータスを取得できませんでした。 #issuecomment-141777867)
解決策、nginxは常に追加します
構文:| add_header name value [常に];
http、サーバー、場所、場所にある場合

server {
  listen       80;
  server_name  www.google.com;

  #charset koi8-r;
  #access_log  /var/log/nginx/host.access.log  main;

  location / {
    if ($request_method = 'OPTIONS') { 
      add_header Access-Control-Allow-Origin 'http://www.baidu.com' always;
      add_header Access-Control-Allow-Credentials 'true' always; 
      add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS' always;
      add_header Access-Control-Allow-Headers 'Keep-Alive,User-Agent,Cache-Control,Content-Type,Authorization,sbid' always;    
      return 200; 
    }

    root   /home/wwwroot/php;
    index  index.php index.html index.htm;
    try_files $uri $uri/ /index.php?$args;
  }

  location ~ \.php$ {
    add_header Access-Control-Allow-Origin 'http://www.baidu.com' always;
    add_header Access-Control-Allow-Credentials 'true' always; 
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS' always;
    add_header Access-Control-Allow-Headers 'Keep-Alive,User-Agent,Cache-Control,Content-Type,Authorization,sbid' always;  
    root /home/wwwroot/php/;
    fastcgi_pass 127.0.0.1:9000;
    fastcgi_index index.php;
    fastcgi_param SCRIPT_FILENAME           $document_root$fastcgi_script_name;
    include fastcgi_params;
  }  
}

server {
  listen       80;
  server_name  www.baidu.com;

  #charset koi8-r;
  #access_log  /var/log/nginx/host.access.log  main;

  location / {
    root   /home/wwwroot/view;
    try_files $uri $uri/ /index.html;
  }  
}
このページは役に立ちましたか?
0 / 5 - 0 評価