Vue-Request not sending Authorization Header

Question

I'm using VueJS with vue-request for http requests. I'm trying to subscribe an user to a Mailchimp list but Mailchimp uses BasicAuth, so I'm doing as such:

   scope.$http.post('https://us15.api.mailchimp.com/3.0/lists/listid/members',
{...mydata...}, {headers: {Authorization: 'Basic myencodedAPIkey'}})

But I get an error from the API: 401 Unauthorized - Your request did not include an API key.

So I check the Network log on Chrome and the Authorization is on my headers like this: **Access-Control-Request-Headers: authorization** but it should be like **Authorization: myencodedAPIkey**

On the Console the error appears as:

XMLHttpRequest cannot load https://us15.api.mailchimp.com/3.0/lists/listid/members. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8000' is therefore not allowed access. The response had HTTP status code 401.

When I use Postman it works just fine as the header is correctly sent.

Answer 1

This problem seems to have been solved here with setting the header on every request https://laracasts.com/discuss/channels/vue/how-to-solve-the-allow-control-allow-cross-in-the-vuejs-header-request-setting?page=2

and here through setting it once Vue-Request not sending Authorization Header

Answer 2

You are getting CORS error, when you are trying to request from one host to another, and the 'another' part does not allow it to happen. To prevent this error you can use webpack proxy configuration, so this way you do not have cross origin request, but I don't know how you will deal with this in production environment if your api does not allow cross origin requests.

In a project I'm working on, our devServer configuration is as follow

    proxy: {
        '/api': {
            target: 'http://localhost:8080/'
        }
    },

with this, any request happening on /api/any/url will be redirect to localhost:8080/api/any/url