angular.js - Angular1+gulp 项目使用 http-proxy-middleware 作代理的问题
天蓬老师
天蓬老师 2017-05-15 17:14:17
0
2
873

打包完成后,浏览器打开了该链接:http://localhost:3000/#/register
完成注册功能时有post请求,如注册信息的提交,有get请求,如检查手机号是否已注册。
现在遇到的问题是get请求都能正常使用,post请求都不能正常使用。

如下,get请求是正常的,拿到了期望的结果。

如下,post请求不正常,原本是post请求,怎么代理时变成了 Request Method:OPTIONS ,然后就出错了。

附上代理相关的配置:

var browserSync = require('browser-sync').create();
var proxyMiddleware = require('http-proxy-middleware');

gulp.task('server', ['build'], function() {
    var middleware = proxyMiddleware('/d', {target: 'http://api.b.cn', changeOrigin: true});
    browserSync.init({
        server: {
            baseDir:dist,
            index: 'index.html',
            middleware: middleware
        }
    });
});
天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

全員に返信(2)
过去多啦不再A梦

ご招待ありがとうございます!
クロスドメイン リソース共有標準では、サーバーがどのオリジン サイトにどのリソースへのアクセス権限があるかを宣言できるようにする HTTP ヘッダー フィールドの新しいセットが追加されています。さらに、仕様では、サーバー データに副作用を及ぼす可能性がある HTTP リクエスト メソッド (特に GET 以外の HTTP リクエスト、または特定の MIME タイプを使用した POST リクエスト) について、ブラウザは最初に OPTIONS メソッドを使用してプリフライト リクエストを開始する必要があります。 (プリフライトリクエスト) サーバーがクロスドメインリクエストを許可しているかどうかを確認します。サーバーは許可を確認した後、実際の HTTP リクエストを開始します。サーバーは、プリフライト要求を返す際に、ID 資格情報 (Cookie および HTTP 認証関連データを含む) を送信する必要があるかどうかをクライアントに通知することもできます。
次の記事を詳しく読むことをお勧めします:

  • HTTPアクセス制御

この問題を解決するには、次の 2 つの方法があります:

  • CORS クロスドメイン リクエスト ヘッダーを追加します

  • 開発のみに必要な場合は、Fiddler を使用して CORS クロスドメイン リクエスト ヘッダーを設定できます。最近、非常に便利な Chrome アーティファクト CORS Toggle を見つけました。

参考リソース

  • CORS ソリューション

  • クロスドメインの問題、解決策 - CORS ソリューション

  • あなたの知らないクロスオリジンリソース共有 (CORS)

いいねを押す +0
淡淡烟草味

同じ問題が発生しましたか?

いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート