web-dev-qa-db-ja.com

Vue Axios CORSポリシー：いいえ 'Access-Control-Allow-Origin'

vueとcodeigniterを使用してアプリをビルドしましたが、apiを取得しようとすると問題が発生し、コンソールでこのエラーが発生しました

Access to XMLHttpRequest at 'http://localhost:8888/project/login' 
from Origin 'http://localhost:8080' has been blocked by CORS policy: 
Request header field access-control-allow-Origin is not allowed 
by Access-Control-Allow-Headers in preflight response.

私はフロントエンド（main.js）でこのようにしてきました

axios.defaults.headers.common['Content-Type'] = 'application/x-www-form-urlencoded'
axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*';

そして、これはバックエンド（コントローラー）

header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");

およびvueログイン方法

this.axios.post('http://localhost:8888/project/login', this.data, {
   headers: {
          "Access-Control-Allow-Origin": "*",
          "Access-Control-Allow-Methods": "GET, POST, PATCH, PUT, DELETE, OPTIONS",
          "Access-Control-Allow-Headers": "Origin, Content-Type, X-Auth-Token"
        }
      }).then(res => {
        console.log(res);
      }).catch(err => {
        console.log(err.response);
      });

私はstackoverflowで検索して試しましたが動作しません、どうすれば解決できますか？手伝ってくれてどうもありがとう

jsonvue.jsaxios
7
Ashtav

私の場合、curl && postmanは機能しますが、vue axios.post

Origin ' http：//%%%%.local 'から ' http：// %%%%：9200/lead/_search 'でのXMLHttpRequestへのアクセスCORSポリシーによってブロック：リクエストヘッダーフィールドaccess-control-allow-Originは、プリフライトレスポンスのAccess-Control-Allow-Headersでは許可されていません。

したがって、問題はサーバーではなくvue側にあります！

サーバーの応答に「access-control-allow-Origin：*」ヘッダーが含まれています

1
Sil2

これは、ex- You Vue appがlocalhost：8080で実行されているが、バックエンドAPIが実行されている http：// localhost：8888 =この状況では、この代わりにこのlocalhost：8080/project/loginを探すaxiosリクエスト http：// localhost：8888/project/login

この問題を解決するには、vueアプリにプロキシを作成する必要があります

この手順に従ってくださいルートフォルダー内にまだない場合は、jsファイルvue.config.jsまたはwebpack.config.jsを作成します

次に以下を含めます

module.exports = {
 devServer: {
     proxy: 'https://localhost:8888'
 } }

複数のバックエンドが必要な場合は、以下を使用してください

module.exports = {
devServer: {
    proxy: {
        '/V1': {
            target: 'http://localhost:8888',
            changeOrigin: true,
            pathRewrite: {
                '^/V1': ''
            }
        },
        '/V2': {
            target: 'https://loclhost:4437',
            changeOrigin: true,
            pathRewrite: {
                '^/V2': ''
            }
        },

    }
}

エンドポイントの前で2番目のものを選択する場合、V1またはV2 exを使用します。エンドポイントは、ホストごとにV1/project/loginまたはV2/project/loginを使用する前の/ project/loginです。

0
Chameera W. Ashan