Authorization Header of http request doesn't send to the server when developing with 2 webpack… CORS...





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







-1















Solution at the END.



My server was my problem... Shortly solution, I need to use express cors



Original POST:



First of ALL:

I have add Access-Control-Allow-Origin, Access-Control-Allow-Headers and i can access the server, but, i can't send data in the Header to the server.



So:

I am developing basically with Vue.js (with webpack to hot reload changes) and Express (with nodemon).
So I have 2 separated servers:




  • First: backend (server) running at: http://localhost:3000 with nodemon

  • Second: frontend (client) running at: http://localhost:8080 with webpack-dev-server (to hot reload vuejs changes) it will be develop at single page application.


My server has authotization with passport.js, using jwt token (this articles show how: authentication vuejs and express passport jwt token). But not the point, just to explain.



When I make a request (using axios, fetch, doesn't matter) when I send a request to my API from http://localhost:8080 (port 8080, webpack) to the server at http://localhost:3000/api/products they didn't receive the Authorization header.



If, i make a request from the same server, from http://localhost:3000/index.html (port 3000) to the server at http://localhost:3000/api/products they receive the Authorization header.



I don't know Why!



At the server I implement CORs policy like this:



//(...)

app.use(function(req, res, next) {

  res.header('Access-Control-Allow-Origin', "*");

  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');

  res.header('Access-Control-Allow-Credentials', 'true');

  res.header("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, access-control-request-headers, Origin, Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, authorization, Access-Control-Allow-Credentials, X-Auth-Token, X-Accept-Charset,X-Accept");

  //res.header("Access-Control-Allow-Headers", "*");



  //res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

  next();

});

//(...)


At the client I send the header:



  // (...) Imports

  import axios from "axios";



  // (...) other code

  const http = axios.create ({

    baseURL: process.env.VUE_APP_ROOT_API,

    timeout: 1000,

    withCredentials: true,

    headers: {'Content-Type': 'application/json'},

  });



  /*   // -- I Have tried this too...

  http.interceptors.request.use (

    function (config) {

      if (token) config.headers.Authorization = `Bearer ${token}`;

      return config;

    },

    function (error) {

      return Promise.reject (error);

    }

  );      

  */



  http.get('http://localhost:3000/api/products', {headers : { authorization: `Bearer ${token}` } }).then(data => {



// (...) code after


When I test at the same server it Works, When in separated server they don't send a header to the server.



Here a gif to show the problem:



gif



CODE EXAMPLE TO TEST THE PROBLEM: https://github.com/dennnisk/cors_police_response_preflight_does_not_have_http_ok.git



I'm stuck...




**EDIT 1 **:



I Change the code part os axios, adding withCredentials: true, as suggested, but got the error: Access to XMLHttpRequest at 'http://localhost:3000/api/products' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.



So, I change the server app.js from this:



(...)

app.use(function(req, res, next) {

   res.header('Access-Control-Allow-Origin', "*");

   res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');

(...)


To this:



(...)

app.use(function(req, res, next) {

res.header('Access-Control-Allow-Origin', "http://localhost:8080/");

res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');


(...)



And get this error: Access to XMLHttpRequest at 'http://localhost:3000/api/products' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.



I think, something is wrong with the server config...




EDIT 2:



It was my server. Need to use express cors
Posted a answer below...






express cors authorization axios webpack-dev-server







share|improve this question

























  • If you don’t set 'withCredentials: true' for the axios.get call in your frontend code, the browser won’t send the Authorization header.

    – sideshowbarker
    Jan 3 at 11:39











  • Thanks!, I just tried that, but, don't work. :(.. I Change and got the error: Access to XMLHttpRequest at 'http://localhost:3000/api/products' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.. I think somenthing is wrong at the server. I tried to change from res.header('Access-Control-Allow-Origin', "*"); to res.header('Access-Control-Allow-Origin', "http://localhost:8080"); but doen't work.

    – dennnis
    Jan 3 at 12:17




















-1















Solution at the END.



My server was my problem... Shortly solution, I need to use express cors



Original POST:



First of ALL:

I have add Access-Control-Allow-Origin, Access-Control-Allow-Headers and i can access the server, but, i can't send data in the Header to the server.



So:

I am developing basically with Vue.js (with webpack to hot reload changes) and Express (with nodemon).
So I have 2 separated servers:




  • First: backend (server) running at: http://localhost:3000 with nodemon

  • Second: frontend (client) running at: http://localhost:8080 with webpack-dev-server (to hot reload vuejs changes) it will be develop at single page application.


My server has authotization with passport.js, using jwt token (this articles show how: authentication vuejs and express passport jwt token). But not the point, just to explain.



When I make a request (using axios, fetch, doesn't matter) when I send a request to my API from http://localhost:8080 (port 8080, webpack) to the server at http://localhost:3000/api/products they didn't receive the Authorization header.



If, i make a request from the same server, from http://localhost:3000/index.html (port 3000) to the server at http://localhost:3000/api/products they receive the Authorization header.



I don't know Why!



At the server I implement CORs policy like this:



//(...)

app.use(function(req, res, next) {

  res.header('Access-Control-Allow-Origin', "*");

  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');

  res.header('Access-Control-Allow-Credentials', 'true');

  res.header("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, access-control-request-headers, Origin, Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, authorization, Access-Control-Allow-Credentials, X-Auth-Token, X-Accept-Charset,X-Accept");

  //res.header("Access-Control-Allow-Headers", "*");



  //res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

  next();

});

//(...)


At the client I send the header:



  // (...) Imports

  import axios from "axios";



  // (...) other code

  const http = axios.create ({

    baseURL: process.env.VUE_APP_ROOT_API,

    timeout: 1000,

    withCredentials: true,

    headers: {'Content-Type': 'application/json'},

  });



  /*   // -- I Have tried this too...

  http.interceptors.request.use (

    function (config) {

      if (token) config.headers.Authorization = `Bearer ${token}`;

      return config;

    },

    function (error) {

      return Promise.reject (error);

    }

  );      

  */



  http.get('http://localhost:3000/api/products', {headers : { authorization: `Bearer ${token}` } }).then(data => {



// (...) code after


When I test at the same server it Works, When in separated server they don't send a header to the server.



Here a gif to show the problem:



gif



CODE EXAMPLE TO TEST THE PROBLEM: https://github.com/dennnisk/cors_police_response_preflight_does_not_have_http_ok.git



I'm stuck...




**EDIT 1 **:



I Change the code part os axios, adding withCredentials: true, as suggested, but got the error: Access to XMLHttpRequest at 'http://localhost:3000/api/products' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.



So, I change the server app.js from this:



(...)

app.use(function(req, res, next) {

   res.header('Access-Control-Allow-Origin', "*");

   res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');

(...)


To this:



(...)

app.use(function(req, res, next) {

res.header('Access-Control-Allow-Origin', "http://localhost:8080/");

res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');


(...)



And get this error: Access to XMLHttpRequest at 'http://localhost:3000/api/products' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.



I think, something is wrong with the server config...




EDIT 2:



It was my server. Need to use express cors
Posted a answer below...






express cors authorization axios webpack-dev-server







share|improve this question

























  • If you don’t set 'withCredentials: true' for the axios.get call in your frontend code, the browser won’t send the Authorization header.

    – sideshowbarker
    Jan 3 at 11:39











  • Thanks!, I just tried that, but, don't work. :(.. I Change and got the error: Access to XMLHttpRequest at 'http://localhost:3000/api/products' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.. I think somenthing is wrong at the server. I tried to change from res.header('Access-Control-Allow-Origin', "*"); to res.header('Access-Control-Allow-Origin', "http://localhost:8080"); but doen't work.

    – dennnis
    Jan 3 at 12:17
















-1












-1








-1








Solution at the END.



My server was my problem... Shortly solution, I need to use express cors



Original POST:



First of ALL:

I have add Access-Control-Allow-Origin, Access-Control-Allow-Headers and i can access the server, but, i can't send data in the Header to the server.



So:

I am developing basically with Vue.js (with webpack to hot reload changes) and Express (with nodemon).
So I have 2 separated servers:




  • First: backend (server) running at: http://localhost:3000 with nodemon

  • Second: frontend (client) running at: http://localhost:8080 with webpack-dev-server (to hot reload vuejs changes) it will be develop at single page application.


My server has authotization with passport.js, using jwt token (this articles show how: authentication vuejs and express passport jwt token). But not the point, just to explain.



When I make a request (using axios, fetch, doesn't matter) when I send a request to my API from http://localhost:8080 (port 8080, webpack) to the server at http://localhost:3000/api/products they didn't receive the Authorization header.



If, i make a request from the same server, from http://localhost:3000/index.html (port 3000) to the server at http://localhost:3000/api/products they receive the Authorization header.



I don't know Why!



At the server I implement CORs policy like this:



//(...)

app.use(function(req, res, next) {

  res.header('Access-Control-Allow-Origin', "*");

  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');

  res.header('Access-Control-Allow-Credentials', 'true');

  res.header("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, access-control-request-headers, Origin, Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, authorization, Access-Control-Allow-Credentials, X-Auth-Token, X-Accept-Charset,X-Accept");

  //res.header("Access-Control-Allow-Headers", "*");



  //res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

  next();

});

//(...)


At the client I send the header:



  // (...) Imports

  import axios from "axios";



  // (...) other code

  const http = axios.create ({

    baseURL: process.env.VUE_APP_ROOT_API,

    timeout: 1000,

    withCredentials: true,

    headers: {'Content-Type': 'application/json'},

  });



  /*   // -- I Have tried this too...

  http.interceptors.request.use (

    function (config) {

      if (token) config.headers.Authorization = `Bearer ${token}`;

      return config;

    },

    function (error) {

      return Promise.reject (error);

    }

  );      

  */



  http.get('http://localhost:3000/api/products', {headers : { authorization: `Bearer ${token}` } }).then(data => {



// (...) code after


When I test at the same server it Works, When in separated server they don't send a header to the server.



Here a gif to show the problem:



gif



CODE EXAMPLE TO TEST THE PROBLEM: https://github.com/dennnisk/cors_police_response_preflight_does_not_have_http_ok.git



I'm stuck...




**EDIT 1 **:



I Change the code part os axios, adding withCredentials: true, as suggested, but got the error: Access to XMLHttpRequest at 'http://localhost:3000/api/products' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.



So, I change the server app.js from this:



(...)

app.use(function(req, res, next) {

   res.header('Access-Control-Allow-Origin', "*");

   res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');

(...)


To this:



(...)

app.use(function(req, res, next) {

res.header('Access-Control-Allow-Origin', "http://localhost:8080/");

res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');


(...)



And get this error: Access to XMLHttpRequest at 'http://localhost:3000/api/products' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.



I think, something is wrong with the server config...




EDIT 2:



It was my server. Need to use express cors
Posted a answer below...






express cors authorization axios webpack-dev-server







share|improve this question
















Solution at the END.



My server was my problem... Shortly solution, I need to use express cors



Original POST:



First of ALL:

I have add Access-Control-Allow-Origin, Access-Control-Allow-Headers and i can access the server, but, i can't send data in the Header to the server.



So:

I am developing basically with Vue.js (with webpack to hot reload changes) and Express (with nodemon).
So I have 2 separated servers:




  • First: backend (server) running at: http://localhost:3000 with nodemon

  • Second: frontend (client) running at: http://localhost:8080 with webpack-dev-server (to hot reload vuejs changes) it will be develop at single page application.


My server has authotization with passport.js, using jwt token (this articles show how: authentication vuejs and express passport jwt token). But not the point, just to explain.



When I make a request (using axios, fetch, doesn't matter) when I send a request to my API from http://localhost:8080 (port 8080, webpack) to the server at http://localhost:3000/api/products they didn't receive the Authorization header.



If, i make a request from the same server, from http://localhost:3000/index.html (port 3000) to the server at http://localhost:3000/api/products they receive the Authorization header.



I don't know Why!



At the server I implement CORs policy like this:



//(...)

app.use(function(req, res, next) {

  res.header('Access-Control-Allow-Origin', "*");

  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');

  res.header('Access-Control-Allow-Credentials', 'true');

  res.header("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, access-control-request-headers, Origin, Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, authorization, Access-Control-Allow-Credentials, X-Auth-Token, X-Accept-Charset,X-Accept");

  //res.header("Access-Control-Allow-Headers", "*");



  //res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

  next();

});

//(...)


At the client I send the header:



  // (...) Imports

  import axios from "axios";



  // (...) other code

  const http = axios.create ({

    baseURL: process.env.VUE_APP_ROOT_API,

    timeout: 1000,

    withCredentials: true,

    headers: {'Content-Type': 'application/json'},

  });



  /*   // -- I Have tried this too...

  http.interceptors.request.use (

    function (config) {

      if (token) config.headers.Authorization = `Bearer ${token}`;

      return config;

    },

    function (error) {

      return Promise.reject (error);

    }

  );      

  */



  http.get('http://localhost:3000/api/products', {headers : { authorization: `Bearer ${token}` } }).then(data => {



// (...) code after


When I test at the same server it Works, When in separated server they don't send a header to the server.



Here a gif to show the problem:



gif



CODE EXAMPLE TO TEST THE PROBLEM: https://github.com/dennnisk/cors_police_response_preflight_does_not_have_http_ok.git



I'm stuck...




**EDIT 1 **:



I Change the code part os axios, adding withCredentials: true, as suggested, but got the error: Access to XMLHttpRequest at 'http://localhost:3000/api/products' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.



So, I change the server app.js from this:



(...)

app.use(function(req, res, next) {

   res.header('Access-Control-Allow-Origin', "*");

   res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');

(...)


To this:



(...)

app.use(function(req, res, next) {

res.header('Access-Control-Allow-Origin', "http://localhost:8080/");

res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');


(...)



And get this error: Access to XMLHttpRequest at 'http://localhost:3000/api/products' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.



I think, something is wrong with the server config...




EDIT 2:



It was my server. Need to use express cors
Posted a answer below...






express cors authorization axios webpack-dev-server




express cors authorization axios webpack-dev-server






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Jan 3 at 15:21







dennnis

















asked Jan 3 at 11:12









dennnisdennnis

94




94













  • If you don’t set 'withCredentials: true' for the axios.get call in your frontend code, the browser won’t send the Authorization header.

    – sideshowbarker
    Jan 3 at 11:39











  • Thanks!, I just tried that, but, don't work. :(.. I Change and got the error: Access to XMLHttpRequest at 'http://localhost:3000/api/products' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.. I think somenthing is wrong at the server. I tried to change from res.header('Access-Control-Allow-Origin', "*"); to res.header('Access-Control-Allow-Origin', "http://localhost:8080"); but doen't work.

    – dennnis
    Jan 3 at 12:17





















  • If you don’t set 'withCredentials: true' for the axios.get call in your frontend code, the browser won’t send the Authorization header.

    – sideshowbarker
    Jan 3 at 11:39











  • Thanks!, I just tried that, but, don't work. :(.. I Change and got the error: Access to XMLHttpRequest at 'http://localhost:3000/api/products' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.. I think somenthing is wrong at the server. I tried to change from res.header('Access-Control-Allow-Origin', "*"); to res.header('Access-Control-Allow-Origin', "http://localhost:8080"); but doen't work.

    – dennnis
    Jan 3 at 12:17



















If you don’t set 'withCredentials: true' for the axios.get call in your frontend code, the browser won’t send the Authorization header.

– sideshowbarker
Jan 3 at 11:39





If you don’t set 'withCredentials: true' for the axios.get call in your frontend code, the browser won’t send the Authorization header.

– sideshowbarker
Jan 3 at 11:39













Thanks!, I just tried that, but, don't work. :(.. I Change and got the error: Access to XMLHttpRequest at 'http://localhost:3000/api/products' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.. I think somenthing is wrong at the server. I tried to change from res.header('Access-Control-Allow-Origin', "*"); to res.header('Access-Control-Allow-Origin', "http://localhost:8080"); but doen't work.

– dennnis
Jan 3 at 12:17







Thanks!, I just tried that, but, don't work. :(.. I Change and got the error: Access to XMLHttpRequest at 'http://localhost:3000/api/products' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.. I think somenthing is wrong at the server. I tried to change from res.header('Access-Control-Allow-Origin', "*"); to res.header('Access-Control-Allow-Origin', "http://localhost:8080"); but doen't work.

– dennnis
Jan 3 at 12:17














2 Answers
2






active

oldest

votes


















0














You forgot add withCredentials: true in axios?



const myrequests = axios.create({

  withCredentials: true,

  ...

})


and after that:



myrequests.get('http://localhost:3000/api/products', {headers : { 

  authorization: `Bearer ${token}` } })

  .then((data) => { 

   // REST OF THE CODE

  })

// (...) code after





share|improve this answer
























  • Should be fine if you add the myrequests configuration in other file and import in main.js instead import axios as it.

    – ƒernando Valle
    Jan 3 at 12:00











  • I have tried that. But doesn't work. I think something is wrong at the server. I will edit the post and complement the question with this, and the new error...

    – dennnis
    Jan 3 at 12:20



















0














Solution to the problem



For some reason that I don't know, my CORS manual policy doesn't work correctly.



//(...)

app.use(function(req, res, next) {

  res.header('Access-Control-Allow-Origin', "*");

  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');

  res.header('Access-Control-Allow-Credentials', 'true');

  res.header("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, access-control-request-headers, Origin, Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, authorization, Access-Control-Allow-Credentials, X-Auth-Token, X-Accept-Charset,X-Accept");

  next();

});

//(...)


1 - So I eliminate that and install cors yarn add cors --save (or npm install cors --save)

2 - Add require for cors: 



 var express = require('express');

 var cors = require('cors');  ///  <<======= Add here

 var path = require('path');


3 - Use cors before my "authentication" method, like:



// get authenticated data

app.use('/api/products', cors({credentials: true, origin: 'http://localhost:8080'}), isAutenticated(), function(req, res, next) {

  res.json({id: '1000', text: 'test'});

});


That's it. Works fine... finally, after almost 2 days...



I commit the solution at :
https://github.com/dennnisk/cors_police_response_preflight_does_not_have_http_ok






share|improve this answer
























  • Yes, probably the problem was the order of setting the middleware for CORS, must be before the authentication method (If is passport it must be one of the last).

    – ƒernando Valle
    Jan 4 at 11:19














Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54021187%2fauthorization-header-of-http-request-doesnt-send-to-the-server-when-developing%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























2 Answers
2






active

oldest

votes








2 Answers
2






active

oldest

votes









active

oldest

votes






active

oldest

votes









0














You forgot add withCredentials: true in axios?



const myrequests = axios.create({

  withCredentials: true,

  ...

})


and after that:



myrequests.get('http://localhost:3000/api/products', {headers : { 

  authorization: `Bearer ${token}` } })

  .then((data) => { 

   // REST OF THE CODE

  })

// (...) code after





share|improve this answer
























  • Should be fine if you add the myrequests configuration in other file and import in main.js instead import axios as it.

    – ƒernando Valle
    Jan 3 at 12:00











  • I have tried that. But doesn't work. I think something is wrong at the server. I will edit the post and complement the question with this, and the new error...

    – dennnis
    Jan 3 at 12:20
















0














You forgot add withCredentials: true in axios?



const myrequests = axios.create({

  withCredentials: true,

  ...

})


and after that:



myrequests.get('http://localhost:3000/api/products', {headers : { 

  authorization: `Bearer ${token}` } })

  .then((data) => { 

   // REST OF THE CODE

  })

// (...) code after





share|improve this answer
























  • Should be fine if you add the myrequests configuration in other file and import in main.js instead import axios as it.

    – ƒernando Valle
    Jan 3 at 12:00











  • I have tried that. But doesn't work. I think something is wrong at the server. I will edit the post and complement the question with this, and the new error...

    – dennnis
    Jan 3 at 12:20














0












0








0







You forgot add withCredentials: true in axios?



const myrequests = axios.create({

  withCredentials: true,

  ...

})


and after that:



myrequests.get('http://localhost:3000/api/products', {headers : { 

  authorization: `Bearer ${token}` } })

  .then((data) => { 

   // REST OF THE CODE

  })

// (...) code after





share|improve this answer













You forgot add withCredentials: true in axios?



const myrequests = axios.create({

  withCredentials: true,

  ...

})


and after that:



myrequests.get('http://localhost:3000/api/products', {headers : { 

  authorization: `Bearer ${token}` } })

  .then((data) => { 

   // REST OF THE CODE

  })

// (...) code after






share|improve this answer












share|improve this answer



share|improve this answer










answered Jan 3 at 11:57









ƒernando Valleƒernando Valle

2,31052751




2,31052751













  • Should be fine if you add the myrequests configuration in other file and import in main.js instead import axios as it.

    – ƒernando Valle
    Jan 3 at 12:00











  • I have tried that. But doesn't work. I think something is wrong at the server. I will edit the post and complement the question with this, and the new error...

    – dennnis
    Jan 3 at 12:20



















  • Should be fine if you add the myrequests configuration in other file and import in main.js instead import axios as it.

    – ƒernando Valle
    Jan 3 at 12:00











  • I have tried that. But doesn't work. I think something is wrong at the server. I will edit the post and complement the question with this, and the new error...

    – dennnis
    Jan 3 at 12:20

















Should be fine if you add the myrequests configuration in other file and import in main.js instead import axios as it.

– ƒernando Valle
Jan 3 at 12:00





Should be fine if you add the myrequests configuration in other file and import in main.js instead import axios as it.

– ƒernando Valle
Jan 3 at 12:00













I have tried that. But doesn't work. I think something is wrong at the server. I will edit the post and complement the question with this, and the new error...

– dennnis
Jan 3 at 12:20





I have tried that. But doesn't work. I think something is wrong at the server. I will edit the post and complement the question with this, and the new error...

– dennnis
Jan 3 at 12:20













0














Solution to the problem



For some reason that I don't know, my CORS manual policy doesn't work correctly.



//(...)

app.use(function(req, res, next) {

  res.header('Access-Control-Allow-Origin', "*");

  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');

  res.header('Access-Control-Allow-Credentials', 'true');

  res.header("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, access-control-request-headers, Origin, Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, authorization, Access-Control-Allow-Credentials, X-Auth-Token, X-Accept-Charset,X-Accept");

  next();

});

//(...)


1 - So I eliminate that and install cors yarn add cors --save (or npm install cors --save)

2 - Add require for cors: 



 var express = require('express');

 var cors = require('cors');  ///  <<======= Add here

 var path = require('path');


3 - Use cors before my "authentication" method, like:



// get authenticated data

app.use('/api/products', cors({credentials: true, origin: 'http://localhost:8080'}), isAutenticated(), function(req, res, next) {

  res.json({id: '1000', text: 'test'});

});


That's it. Works fine... finally, after almost 2 days...



I commit the solution at :
https://github.com/dennnisk/cors_police_response_preflight_does_not_have_http_ok






share|improve this answer
























  • Yes, probably the problem was the order of setting the middleware for CORS, must be before the authentication method (If is passport it must be one of the last).

    – ƒernando Valle
    Jan 4 at 11:19


















0














Solution to the problem



For some reason that I don't know, my CORS manual policy doesn't work correctly.



//(...)

app.use(function(req, res, next) {

  res.header('Access-Control-Allow-Origin', "*");

  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');

  res.header('Access-Control-Allow-Credentials', 'true');

  res.header("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, access-control-request-headers, Origin, Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, authorization, Access-Control-Allow-Credentials, X-Auth-Token, X-Accept-Charset,X-Accept");

  next();

});

//(...)


1 - So I eliminate that and install cors yarn add cors --save (or npm install cors --save)

2 - Add require for cors: 



 var express = require('express');

 var cors = require('cors');  ///  <<======= Add here

 var path = require('path');


3 - Use cors before my "authentication" method, like:



// get authenticated data

app.use('/api/products', cors({credentials: true, origin: 'http://localhost:8080'}), isAutenticated(), function(req, res, next) {

  res.json({id: '1000', text: 'test'});

});


That's it. Works fine... finally, after almost 2 days...



I commit the solution at :
https://github.com/dennnisk/cors_police_response_preflight_does_not_have_http_ok






share|improve this answer
























  • Yes, probably the problem was the order of setting the middleware for CORS, must be before the authentication method (If is passport it must be one of the last).

    – ƒernando Valle
    Jan 4 at 11:19
















0












0








0







Solution to the problem



For some reason that I don't know, my CORS manual policy doesn't work correctly.



//(...)

app.use(function(req, res, next) {

  res.header('Access-Control-Allow-Origin', "*");

  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');

  res.header('Access-Control-Allow-Credentials', 'true');

  res.header("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, access-control-request-headers, Origin, Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, authorization, Access-Control-Allow-Credentials, X-Auth-Token, X-Accept-Charset,X-Accept");

  next();

});

//(...)


1 - So I eliminate that and install cors yarn add cors --save (or npm install cors --save)

2 - Add require for cors: 



 var express = require('express');

 var cors = require('cors');  ///  <<======= Add here

 var path = require('path');


3 - Use cors before my "authentication" method, like:



// get authenticated data

app.use('/api/products', cors({credentials: true, origin: 'http://localhost:8080'}), isAutenticated(), function(req, res, next) {

  res.json({id: '1000', text: 'test'});

});


That's it. Works fine... finally, after almost 2 days...



I commit the solution at :
https://github.com/dennnisk/cors_police_response_preflight_does_not_have_http_ok






share|improve this answer













Solution to the problem



For some reason that I don't know, my CORS manual policy doesn't work correctly.



//(...)

app.use(function(req, res, next) {

  res.header('Access-Control-Allow-Origin', "*");

  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');

  res.header('Access-Control-Allow-Credentials', 'true');

  res.header("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, access-control-request-headers, Origin, Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, authorization, Access-Control-Allow-Credentials, X-Auth-Token, X-Accept-Charset,X-Accept");

  next();

});

//(...)


1 - So I eliminate that and install cors yarn add cors --save (or npm install cors --save)

2 - Add require for cors: 



 var express = require('express');

 var cors = require('cors');  ///  <<======= Add here

 var path = require('path');


3 - Use cors before my "authentication" method, like:



// get authenticated data

app.use('/api/products', cors({credentials: true, origin: 'http://localhost:8080'}), isAutenticated(), function(req, res, next) {

  res.json({id: '1000', text: 'test'});

});


That's it. Works fine... finally, after almost 2 days...



I commit the solution at :
https://github.com/dennnisk/cors_police_response_preflight_does_not_have_http_ok







share|improve this answer












share|improve this answer



share|improve this answer










answered Jan 3 at 13:18









dennnisdennnis

94




94













  • Yes, probably the problem was the order of setting the middleware for CORS, must be before the authentication method (If is passport it must be one of the last).

    – ƒernando Valle
    Jan 4 at 11:19





















  • Yes, probably the problem was the order of setting the middleware for CORS, must be before the authentication method (If is passport it must be one of the last).

    – ƒernando Valle
    Jan 4 at 11:19



















Yes, probably the problem was the order of setting the middleware for CORS, must be before the authentication method (If is passport it must be one of the last).

– ƒernando Valle
Jan 4 at 11:19







Yes, probably the problem was the order of setting the middleware for CORS, must be before the authentication method (If is passport it must be one of the last).

– ƒernando Valle
Jan 4 at 11:19




















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid …



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54021187%2fauthorization-header-of-http-request-doesnt-send-to-the-server-when-developing%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

MongoDB - Not Authorized To Execute Command

Image
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box; } 0 I have successfully enabled authorization on MongoDB and I have created an account on the admin database and then I created an account for my database called test. The following connection string to connect to my test database works successfully: mongo --host 192.168.17.52 --port 27017 -u user1 -p password --authenticationDatabase test Only problem I have now is, I cannot execute commands such as: show dbs. I get the following error when I try to do so: "errmsg" : "not authorized on admin to execute command { listDatabases: 1.0, lsid: { id: UUID("a1d5bc0d-bc58-485e-b232-270758a89455") }, $db: "admin...
Read more

How to fix TextFormField cause rebuild widget in Flutter

Image
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box; } 0 I've got the same issue at #9280. I tried all solutions from that topic with/without GlobalKey for Scaffold and Form but the problem wasn't fixed. I tried to build a authentication form with login and signup. But the keyboard doesn't show when I tap the TextFormField at the first time. Then I try to input some letter from physical keyboard, the widget is rebuilt. Like this: login screen Nothing to be log when I run flutter run --verbose, so I logged manually. Every tapping on field, the widget called dispose -> init -> build. [√] Flutter (Channel beta, v1.0.0, on Microsoft Windows [Version 10.0.17763.195], ...
Read more

in spring boot 2.1 many test slices are not allowed anymore due to multiple @BootstrapWith

Image
1 I tried to upgrade a yummy sandwich made of two test slices (@JsonTest and @JdbcTest in my case, crunchy test code in between) adding spring boot 2.1 flavour to it. But it seems it was not much of a success. I cannot annotate my tests with many @...Test since they are now each bringing their own XxxTestContextBootstrapper. It used to work when they all used same SpringBootTestContextBootstrapper. @RunWith(SpringRunner.class) @JdbcTest @JsonTest public class Test { @Test public void test() { System.out.printn("Hello, World !"); } } The error I get from BootstrapUtils is illegalStateException : Configuration error: found multiple declarations of @BootstrapWith for test class I understand I might be doing something wrong here but is there an easy way I could load both Json and Jdbc contex...
Read more