何が発生したクロスドメインリクエストを表し、
通常前にアイテムを分離後端、前端要求インターフェース、ブラウザコンソールに次のエラーメッセージ
同様いいえ「アクセス制御 - 許可 - 起源」ヘッダーエラー
なぜクロスドメインリクエストがあります
その理由は、クロスドメインリクエストによって生成される：同一生成元ポリシーブラウザ
これは、潜在的に悪質なファイルを隔離するために使用される重要なセキュリティメカニズムである。したがって、クロスドメインの相同ではありません要求されたリソースたら
クロスドメインリクエストリクエストのどのような
それは、クロスドメインかどうかを判断し、本質的に相同であれば、2つのページかどうかを決定する。プロトコル、（指定されている場合）ポートとドメイン名が同じソースを持つ2つのページ、同じです
、例えば：要求されたページは以下のとおりです。
http://store.company.com/dir/page.html
| ターゲットURL | 結果 | 理由 |
|---|---|---|
http://store.company.com/dir2/other.html |
成功 | 相同 |
http://store.company.com/dir/inner/another.html |
成功 | 相同 |
https://store.company.com/secure.html |
故障 | 異なるプロトコル |
http://store.company.com:81/dir/etc.html |
故障 | 異なるポート |
http://news.company.com/dir/other.html |
故障 | 異なるドメイン |
クロスドメインリクエストの問題を解決する方法
クロスドメイン問題Vueの開発環境
使用VUE-cliのクロスドメインの問題を解決するためのプロジェクト、開発環境を構築
// config/index.js
module.exports = {
dev: {
proxyTable: {
// 代理所有以 api 开头的请求为 http://api.com
'/api': {
target: 'http://api.com', // 接口地址
changeOrigin: true,
pathRewrite: {
'^/api': '' //替换 /api 为 ''
}
}
}
}
}
- 要求URL：/ API / XXX /マッチング要求/ API始まります
- ます。http：//api.com/xxx（ターゲット+ pathRewrite）プロキシURLを要求した後、
- pathRewrite書き換えパス、/ API置き換え "
このようなWebSocketのサポートなどのHTTPプロキシ・ミドルウェア本ミドルウェア、そしてより多くの構成を使用してVUE-CLI、
{
// ...
ws: true
}オンラインとクロスドメイン環境を解きます
- nginxのリバースプロキシ
本番環境では、上記のアプローチは、役割を達成できないだろう。この時間は、エージェントを追加し、nginxの設定ファイルで変更することができます - アクセス制御-Allow- *は、最初に反応して追加
党と異なるドメインまたはポートで要求されたリソースを要求するリソースが、それはクロスドメインリクエストを持つことになりますと、クロスドメインのリソース共有（CORS）そのようなメカニズムの存在：
1クロスドメインを許可するかどうかを、プリフライト要求を起動するためには、OPTIONS要求をサーバ。方法を認識する
2アクセス制御-Allow- *及び最初のヘッダに応じていくつかの受信応答が含まれた後、要求がクロスドメイン、すなわち、開始する許可され正式な要請
プリフライト許容クロスドメイン要求応答ヘッダ
Access-Control-Allow-Origin: * // * 表示允许任意地址,也可是具体域名http://foo.example
Access-Control-Allow-Methods: * // * 表示允许任意方法,也可是POST, GET, OPTIONS等方法
Access-Control-Allow-Headers:Token,Custom-Head // 允许这些自定义的请求头
Access-Control-Max-Age:600 // 返回结果可以用于缓存的最长时间,单位秒,返回-1表示禁用缓存(非必须)溶液は：OPTIONS要求応答ヘッダに応答して、許容クロスドメイン固有の応答ヘッダを増加させます
参考リンク
VUE-CLIリファレンスドキュメント
HTTPプロキシ・ミドルウェア事業
MDN-CORSを説明 ルアンYifeng CORSコメント