Enable Cors to bypass to different ports problem with API requests

Chris11

I am trying to enable cors to bypass the two different ports to get around “No Access-Control-Allow-Origin header” problems, with curl my api request is successful.

Following this help from Razvan (https://github.com/quasarframework/quasar-cli/issues/203), I installed cors using npm and implemented the following in my quasar.conf.js file:

devServer: {
  https: false,
  port: 8080,
  open: true, // opens browser window automatically
  before (app) {
    const cors = require('cors')
    app.use(cors())
  }
}

Still I receive the same error:

Access to XMLHttpRequest at '<URL>' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

My successful curl looked like the following:

curl -H "AuthenticationToken:<token>" <url>

And my current request looks like this:

      const AuthStr = 'Bearer '.concat('<token>')
      await this.$axios.get(`<url>`, { 
        headers: { 
          'AuthenticationToken': AuthStr } })
        .then(response => {
          console.log(response.data);
        })
        .catch((error) => {
          console.log(error);
        })

I’d appreciate useful hints!

dobbel

@Chris11

I don’t think you have to do anything concerning Cors on Quasar’s side if you use Axios.( I send cors requests all the time with Axios/Quasar with no extra cors enabling code).

The problem is that your server does not accept your Cors request:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
So you have to enable cors on the server side:

https://enable-cors.org/

Chris11

@dobbel thank you for the quick response!

I tried to include the general version with the following headers:

headers: { 
         'Access-Control-Allow-Origin': '*',
         'Access-Control-Allow-Methods': 'GET, POST, PUT, PATCH, DELETE, OPTIONS',
         'Access-Control-Allow-Headers': 'Content-Type, Authorization',
         'AuthenticationToken': AuthStr }

This didn’t work and I am also not sure whether this applies to my quasar/vuejs-setup.
I am not an expert, does one of these specific framework-solution apply to one of the localhost setups?
Apache,App Engine,ASP.NET,AWS API Gateway, Caddy, CGI Scripts, ExpressJS, Flask, IIS6, IIS7, Spring Boot Applications in Kotlin, Meteor, nginx, Perl, PHP, ColdFusion, Tomcat, Virtuoso, WCF, BFE

I found another workaround without Cors and instead using a proxy, but my Browser didn’t like that one either (https://www.youtube.com/watch?v=WsYrDu7xkEw)

Do I need to create or do something outside of my quasar files to change any server settings?

dobbel

@Chris11

What backend and url are you using in development?

Meteor for sure does support cors( I use it).

The (quasar - q.conf - devServer - proxy) setup is a workaround that avoids cors requests for development, so why doesn’t it for you?
https://quasar.dev/quasar-cli/api-proxying

just like:

https://medium.com/js-dojo/how-to-deal-with-cors-error-on-vue-cli-3-d78c024ce8d3

metalsadman

@Chris11 cors is backend issue not quasar, set it properly in your server.

Chris11

@dobbel I am uncertain. I am not intentionally using any kind of backend. At the moment I only use the devServer and therefore a local host 8080.
To be honest I am watched several tutorials from the famous Danny and achieved to carry out requests with tokens in the “openweathermap”.

As far as I understand he is not really using any specific backend and I thought I wouldn’t need one either at this time.

I’ll read up on the provided links (thank you!).

@metalsadman thank you for this hint! As all the previous axios api requests worked I had hoped this was only a syntax problem and that I wouldn’t need to set up a backend only for the Cors policy problem

dobbel

@Chris11

if you fire request at some server and have cors error messages, you are using some kind of backend.

I know that tutorial. Unless he’s not showing everything he indeed has no cors issues with the openweather api . That api is supposed to be cors enabled.

Chris11

@dobbel Danny’s openweather api doesn’t bring any problems, I tested it myself. But it also already includes the token in the url,

this.$axios(`https://api.openweathermap.org/data/2.5/weather?q=Berlin&appid=${this.api_token}`).then...

as opposed to my api, which requires me to send a header:
https://www.weclapp.com/api2/

I just tried to whitelist it on the devServer using “allowedHosts” without success:

devServer: {
      https: false,
      port: 8080,
      open: true, // opens browser window automatically
      allowedHosts: ['XXX.weclapp.com'],
      before (app) {
        const cors = require('cors')
        app.use(cors())
      }

dobbel

@Chris11

How to authenticate has nothing to do with the Cors error. You have to enable cors on your api server. Otherwise your Quasar app will never work in production mode ( unless you host it on the same domain: www.weclapp.com, or use a seperate proxy backend to tunnel the requests).

Chris11

@dobbel I start to think that I am not the only one with this problem. Webpack-devServer is my server here and this thread suggests that webpack doesn’t read the settings made in devServer (in quasar.conf.js) properly: https://github.com/webpack/webpack-dev-server/issues/533

I now have a vast list of settings which I should use to bypass this problem: custom headers, whitelist via allowedHosts, use a proxy, install npm cors (I am aware that using all these at the same time might not be the way of the yedi)

devServer: {
  https: false,
  port: 8080,
  open: true, // opens browser window automatically
  allowedHosts: ['XXX.weclapp.com'],
  proxy: {
    '/api': 'https://XXX.weclapp.com'
  },
  before (app) {
    const cors = require('cors')
  
    app.options('*',cors())
    app.use(cors())
  },
  headers: {
    // 'Access-Control-Allow-Methods': 'GET, POST, PUT, PATCH, DELETE, OPTIONS',
    // 'Access-Control-Allow-Headers': 'Content-Type, Authorization',
    'Access-Control-Allow-Origin': '*',
},

Now I might look for the proper place outside of the quasar.conf.js and probably in the webpack-dev-server node module to come closer to any solution…

Chris11

Interim solution:

I now am able to make the request with help of this chrome extension: https://chrome.google.com/webstore/detail/cors-unblock/lfhmikememgdcahcdlaciloancbhjino/related?hl=en

When this extension is enabled, each web request will be appended with “access-control-allow-origin: *” header.

I am wondering why it doesn’t work, when I add those headers in the devServer quasar.conf.js.

This CORS Unblock extension might be nice to test everything in development, but doesn’t solve it for production.

dobbel

@Chris11

Ok let me try it one more time. Cors is a server side setting. Quasar is client side. So nothing you will do in Quasar will make any difference. ( only temporary workarounds like devServer setting, that will not work in production mode)

the backend 2 situations , cors and non-cors enabled:

the api(backend) is cors enabled then everything is fine. All works nothing to be done.
If the api is not cors enabled then enable it IF you have full access to the server. If not you can either send a request to the owner of the api to make it cors enabled or you have to setup your own backend to query their backend.

So another way to make quasar request to a non-cors api is to tunnel the request through your own backend( that is cors enabled because you are in control) to the non cors Api.( this works because request send from server to server don’t have cors issues). You can look at a simple nodejs backend like express.

Please stop trying things out in Quasar to get past cors issues.

Chris11

@dobbel thank you for this specific and helpful answer! I’ll set up a proper backend! Due to many threads concerning this problem (also for other frameworks) I thought, those devServer-setting could be sufficient.

No More Posting New Topics!

Enable Cors to bypass to different ports problem with API requests