0

Vue.js と Axios を使用して Jazz で API を呼び出そうとしていますが、次のエラーが発生します。

' https://jazz.api.com/api/extra_stuff _here'の XMLHttpRequest への オリジン ' http://localhost ' からのアクセスは、CORS ポリシーによってブロックされました: プリフライト要求への応答がアクセス制御チェックに合格しません: いいえ ' Access-Control-Allow-Origin' ヘッダーが要求されたリソースに存在します。

https://enable-cors.org/server_expressjs.htmlまたは追加のような他のソリューションを見てきました

"Content-Type": "application/json",
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "OPTIONS",
"Access-Control-Allow-Headers": "Content-Type, Authorization",
"Access-Control-Allow-Credentials": "true"

私のコードに追加しても、まだ機能しませんでした。Access-Control-Allow-Origin にワイルドカードを使用しても、CORS の問題が発生し、API を呼び出すことができません。私はクライアント側に Vue と Typescript を使用しており、Express をサーバー側で動作させることができました。これは、私の Axios API 呼び出しのコード スニペットです。

return Axios.post('https://jazz.api.com/api/extra_stuff_here', context.getters.getRequest,
        {
          headers: {
            "Content-Type": "application/json",
            "Access-Control-Allow-Origin": "*",
            "Access-Control-Allow-Methods": "OPTIONS",
            "Access-Control-Allow-Headers": "Content-Type, Authorization",
            "Access-Control-Allow-Credentials": "true"
          }
        }
      )

これは、この TypeScript ファイルで API を呼び出している場所であり、ここに私の server.js があります。

var express = require('express');
var path = require('path');
var cors = require('cors');
var bodyParser = require('body-parser');
var morgan = require('morgan');

var app = express();
app.use(morgan('dev'));
app.use(cors());
app.use(bodyParser.json());

var publicRoot = './dist';

//app.use(express.static(path.join(__dirname, '/dist')));
app.use(express.static(publicRoot));

app.get('/', function (req, res) {
    res.sendFile("index.html", { root: publicRoot });
});

app.use(function(req, res, next) { 
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Authorization");
    res.header("Content-Type", "application/json");
    res.header("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
    res.header("Access-Control-Allow-Credentials", "true");
    next();
}); 

app.listen(process.env.PORT || 80, function() {
    console.log("listening on port 80");
});

私が何をしているように見えても、この CORS の問題を理解できません。アプリケーションに Express を追加する前に、サーバー側で Express を使用すると CORS の問題が修正されるのではないかと考えて、同じ問題が発生しました。しかし、それは役に立ちませんでした。事前に、npm run serve を実行して Vue アプリケーションを実行していました。しかし、どんな助けも素晴らしいでしょう！ジャズの問題である可能性はありますか？

4

2 に答える 2

2

更新: Axios で CORS の問題を修正することはできませんでしたが、回避策を見つけることができました。Axios ライブラリを使用する代わりにfetch、API を呼び出すために使用しています。リクエスト呼び出しで行う必要があるのは、パラメーターを渡し、パラメーターに基づいてデータを取得することだけなので、私のアプリケーションはfetch. fetch調査を行っているときに、 ?を使用すると問題や制限がある可能性があることがわかりました。でもまあ、それは私にとってはうまくいくので、この解決策に固執します。誰にとっても参考になる私のコードは次のとおりです。

return fetch('https://dev.jazz.com/api/stuff_goes_here', {
  method: 'post',
  body: JSON.stringify(<request object goes here>)
}).then((res) => res.json())
.then((data) => {
  return data;
}).catch((err)=>console.log(err))
于 2018-12-29T01:09:06.730 に答える