proxy Vuejs ne fonctionne pas avec le modèle webpack

Question

Je développe un projet vuejs avec le modèle webpack sur localhost-à-dire url: localhost:8080 mais j'ai un serveur exprès en cours d'exécution dans https://foo.bar.com

Dans le passé, j'ai fait une demande directe au serveur express en désactivant CORS, mais maintenant j'essaye de faire une demande via proxy.

Selon cette API Proxying During Development j'ai ajouté ce qui suit à mon config/index.js

proxyTable: { 
    // proxy all requests starting with /api to jsonplaceholder 
    '/': { 
    target: 'https://foo.bar.com', 
    changeOrigin: true, 
    pathRewrite: { 
    '^/': '' 
    } 
} 

Et dans ma page de connexion components/login.vue

J'ai quelque chose comme ceci:

... 
methods: { 
    Login(){ 
    // trying 3 times with different urls 
    api.request('post', 'login', {email, password}).then().catch() 
    api.request('post', '/login', {email, password}).then().catch() 
    api.request('post', 'https://foo.bar.com/login', {email, password}).then().catch() 
    } 
} 

Mais je reçois un erreur comme celle-ci:

Failed to load https://foo.bar.com/login: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

Answer 1

Vous devez activer CORS dans votre application expresse comme suit

Installer le paquet CORS de NPM

$ npm install cors 

Activer dans votre application expresse comme ci-dessous le code

var express = require('express') 
var cors = require('cors') 
var app = express() 

app.use(cors()) 

app.get('/api/message', function (req, res, next) { 
    res.json({msg: 'This is CORS-enabled for all origins!'}) 
}) 

Pour en savoir plus informations pour personnaliser le paquet cors selon vos besoins, référez-vous à https://github.com/expressjs/cors