vue.js - "認可": トークンが CORS VUEJS APACHE を通過しません

okwaves2024-01-24  4

My FrontEnd Vue     


var config = {
  method: 'get',
  url: baseUrl + '/v5/test',
  headers: {
    "Accept": "application/json",
    "Content-Type": "application/json",
    "Authorization": Token,
  },
};

私の htaccess ファイル

RewriteCond %{HTTP:Authorization} ^(.) RewriteRule 。 - [e=HTTP_AUTHORIZATION:%1] SetEnvIf 認可 .+ HTTP_AUTHORIZATION=$0 ヘッダーには常に Access-Control-Allow-Origin "" が設定されます。 ヘッダーは常に Access-Control-Allow-Methods "" を設定します。 ヘッダーは常に Access-Control-Allow-Headers: "Authorization" を設定します。 ヘッダーは常に Access-Control-Request-Headers: "Authorization" を設定します。

そのエラーが発生します オリジン「app.mydomain.com」から「mydomain.com/v5/test」の XMLHttpRequest へのアクセスが CORS ポリシーによってブロックされました: プリフライト要求への応答がアクセス制御チェックに合格しません: HTTP OK ステータスがありません。

私のアプリはサブドメインであり、API はドメイン内にあります

ワイルドカード「*」を使用しています。正しくはありますが、「Authorization」を削除した場合: トークンのパス cors

– DevFront

2020 年 9 月 3 日 3:12

私のプロジェクトでも同じ問題があり、まだ答えを探しています。追加する場合にのみ、バックエンドに vue quasar と php codeigniter を使用しています。ヘッダーへの権限を付与すると CORS エラーが発生します。

– 

user16249416

2022 年 10 月 31 日 9:14



------------------------

これは CORS に使用しているヘッダーです

Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization
Access-Control-Allow-Methods: PUT, POST, PATCH, DELETE, GET

その .htaccess で何を達成しようとしているのか正確にはわかりません

2

送信時ヘッダー "Authorization": Token from axios では、cors の問題が発生しますが、axios ヘッダーから "Authorization": Token を削除すると、cors は問題なく通過し、** htaccess ** はそれに設定されます「承認の有無」によるあらゆるリクエストの方法cors の問題なく認証が通過しましたが、私にとっては機能しません: /、この @Babacar 設定は axios ヘッダー内に含まれますか?

– DevFront

2020 年 9 月 3 日 13:52

これはサーバー設定、つまり Expressjs アプリまたは laravel に送られます...

– ババカー・シスéダイヤ

2020 年 9 月 3 日 14:05



------------------------

こんにちは、いくつかの変更を修正しました

まず、これを vue.config.js に追加します。 ビルドしてデプロイする場合は、最初のコメントをサーバーに対してコメント解除し、2 番目のコメントをローカル環境に対してコメント解除するだけです。

    devServer: {
        //proxy: "https://subdomain.example.com/" 
        //proxy: "http://localhost/" // run in local
    },

2 番目 サーバーに、次の htaccess を追加します。

<IfModule mod_headers.c>
    SetEnvIf Origin "http(s)?://(subdomain)\.example\.com$" AccessControlAllowOrigin=1008611
    Header set Access-Control-Allow-Origin "*"
    
    
    Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
    Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"
    Header unset Connection
    Header set Connection keep-alive
    
    Header unset Keep-Alive
    Header set Keep-Alive timeout=100,max=500
</IfModule>

これで CORS は修正されました

2022 年 10 月 26 日 16:28 に回答

DevFront

DevFront

11

3

銅バッジ 3 個

総合生活情報サイト - OKWAVES
総合生活情報サイト - OKWAVES
生活総合情報サイトokwaves(オールアバウト)。その道のプロ(専門家)が、日常生活をより豊かに快適にするノウハウから業界の最新動向、読み物コラムまで、多彩なコンテンツを発信。