I'm trying to issue a CORS get request in Vue via axios. Everything works well so far, but if I need to authenticate via basic auth, I cannot get it to work.
Heres my code
getData: function() {
let vm = this; // assign vue instance to vm
axios.get('url', {
withCredentials: true,
auth: {
username: 'name',
password: 'pass'
}
}).then(function(response) {
console.log(response)
}).catch(function(error) {
console.log(error)
})
}
Even though I entered the credentials, as well as the url correctly, I always get a 401 response. It looks like this.
HTTP/1.1 401 Authorization Required
Date: Wed, 01 Feb 2017 16:23:31 GMT
WWW-Authenticate: Basic realm="'Realm'"
Content-Length: 499
Keep-Alive: timeout=15
Connection: Keep-Alive
Content-Type: text/html; charset=iso-8859-1
The raw request looks like that
OPTIONS 'url' HTTP/1.1
Host: 'host'
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Access-Control-Request-Method: GET
Origin: http://localhost:9000
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3)
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.76
Safari/537.36
Access-Control-Request-Headers: authorization
Accept: */*
DNT: 1
Referer: http://localhost:9000/pages/blog_cc/blog_cc.html
Accept-Encoding: gzip, deflate, sdch, br
Accept-Language: de,en;q=0.8
What am I missing? With Postman and the exact same credentials, everything works like a charm. Even in Chrome directly.
I saw that this question was already asked a few times, but all the posed answers on other threads are no solution for me. I cannot issue the request from node, for example.
Edit: I also tried issuing a request with vanilla JS, also to no avail. It seems the problem lies in the backend. Here's my code, nevertheless.
let xml = new XMLHttpRequest();
xml.open('GET', api, true);
xml.setRequestHeader('Authorization', 'Basic: ' + btoa(user + ':' + pass));
xml.send();
I had the same experience and my workaround was using the following set up to deal with communicating with an OAuth server we had set up:
axios({
headers: { "Content-Type": "application/x-www-form-urlencoded" },
method: "post",
url: REVOKE_URL,
auth: {
username: CLIENT_ID,
password: CLIENT_SECRET
},
data: {
datastuff: actualData
}
});
This worked after futile attempts at using axios.post for days.
Axios version: 0.18.0
So I was looking for example of how to do a post for this and couldn't find a good one. Got it working and it looks like:
const { MAILCHIMP_KEY } = process.env;
const url = "https://us{yourRegionNumber}.api.mailchimp.com/3.0/lists/{yourlistid}/members/";
const client = axios.create({
auth: {
username: "yourmailchimpusername", //This could be your email
password: MAILCHIMP_KEY
},
headers: {
"Content-Type": "application/json"
}
});
const mailChimpRes = await client.post(url, {
email_address: `${email}`,
status: "subscribed",
merge_fields: {
FNAME: `${firstName}`,
LNAME: `${lastName}`
}
});
You could try passing the withCredentials: true, option to the Axios request, if it's a cross site request.
According to their docs, mailchimp does not support client-side requests, so you have to route it through server-side :/
Related
I've created an API and have the following within the WebApiConfig.cs:
var cors = new EnableCorsAttribute("http://localhost:3000", "*", "*");
config.EnableCors(cors);
I'm able to access it with my React application but I've created a new method within one of the controllers and restarted the API. When I tested it in Postman by sending a POST request it worked fine. However I'm now getting the error in the title when I try to access it using my React application. All other methods within the controller work fine. It's just this new one that is causing issues:
Accessing new method in React
const requestOptions = {
method: 'post',
headers: { "Content-type":"application/json",
"Accept":"*/*",
"Accept-Encoding":"gzip, deflate, br" },
body: JSON.stringify({ Data: this.props.data})
};
fetch("http://localhost:9074/Output/EditByMultipleIDs?varA=" + this.state.varA + "&varB=" + this.state.varB + "&varC=" + this.state.varC, requestOptions)
.then(response => response.json());
varA and varC are just a string of comma separated ids and varB is just an integer.
One which works from the same controller
const requestOptions = {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ Data:this.props.data})
};
fetch("http://localhost:9074/Output/EditByID?varA=" + this.state.varA + "&varB=" + this.state.varB, requestOptions)
.then(response => response.json());
here varA and varB are just integers.
I had tried to add in extra headers but that didn't seem to have worked and had also tried to add in [EnableCors(origins: "http://localhost:3000", headers: "*", methods: "*")] into the controller but that didn't help either.
I've noticed that if I remove [System.Web.Mvc.HttpPost] from the EditByMultipleIDs method within the controller then I'm able to hit the method without any CORS issue but then my model variable is null as nothing is passed into it from the body.
Below are the declaration for both methods within the controller:
[System.Web.Mvc.HttpPost]
public ActionResult EditByMultipleIDs(string varA, [FromBody] DTO model, int varB, string varC)
{ //... Do stuff}
[System.Web.Mvc.HttpPost]
public ActionResult EditByID(int varA, [FromBody] DTO model, int varB)
{//... Do stuff}
Also when I open the link in chrome I get:
I'm not sure if that's because the body data is lost so it's not able to complete the request or what but yeah...
EDIT 1: Actual Requests being made:
General
Request URL: http://localhost:9074/Output/EditByMultipleIDs?varA=55279,55280&varB=3&varC=393,394
Request Method: OPTIONS
Status Code: 404 Not Found
Remote Address: [::1]:9074
Referrer Policy: strict-origin-when-cross-origin
Response Headers
Access-Control-Allow-Headers: *
Access-Control-Allow-Methods: *
Access-Control-Allow-Origin: *
Cache-Control: private
Content-Length: 4500
Content-Type: text/html; charset=utf-8
Date: Mon, 04 Jul 2022 08:59:48 GMT
Server: Microsoft-IIS/10.0
X-AspNet-Version: 4.0.30319
X-Powered-By: ASP.NET
X-SourceFiles: =?UTF-8?B?QzpcVXNlcnNcbW5hemlyXERlc2t0b3BcQWZ0b25cUnVsZXMgRW5naW5lXFJ1bGVFbmdpbmVBUEkgLSBDb3B5XFJ1bGVFbmdpbmVBUElcT3V0cHV0XEVkaXRCeU11bHRpcGxlSURz?=
Request Headers
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-GB,en-US;q=0.9,en;q=0.8
Access-Control-Request-Headers: content-type
Access-Control-Request-Method: POST
Connection: keep-alive
Host: localhost:9074
Origin: http://localhost:3000
Referer: http://localhost:3000/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36
I had found the solution here: Handling CORS Preflight requests to ASP.NET MVC actions
Just need to add in:
protected void Application_BeginRequest()
{
if (Request.Headers.AllKeys.Contains("Origin", StringComparer.OrdinalIgnoreCase) &&
Request.HttpMethod == "OPTIONS") {
Response.Flush();
}
}
into Global.asax file so that it sends an empty response whenever it gets a OPTIONS request
I am trying to GET data with my client vueJS on port 8080 from the REST API on port 3000. This is resulting in a CORSE Error. A POST is working fine. To fix this I tried to create a proxy as described here https://medium.com/js-dojo/how-to-deal-with-cors-error-on-vue-cli-3-d78c024ce8d3.
//vue.config.js
module.exports={
devServer:{
proxy: {
'/teams': {
target: 'http://192.168.70.54:3000',
ws: true,
changeOrigin: true,
secure: false
}}}}
I want to redirect my traffic to the 3000 port.
//rest.js
function getTeams() {
var returnVal;
axios({
method: 'get',
url: REST_API + '/teams',
responseType: 'json'
})
.then(function (response) {
console.log(response.data); //Is what I want to return
returnVal = response.data;
});
console.log(returnVal); //Is undefined
return returnVal.data;
}
I am printing response.data to the console but my returnVal is always undefined. What am I missing?
This is my network log in the browser.
General:
Request URL: http://localhost:8080/teams
Request Method: GET
Status Code: 200 OK
Remote Address: 127.0.0.1:8080
Response Headers:
Referrer Policy: no-referrer-when-downgrade
access-control-allow-header: Origin, X-Request-With, Content-Type, Accept
access-control-allow-methods: GET, POST
access-control-allow-origin: *
connection: close
content-length: 1070
content-type: application/json
Date: Tue, 17 Dec 2019 18:57:14 GMT
Request Headers:
X-Powered-By: Express
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Connection: keep-alive
Host: localhost:8080
Referer: http://localhost:8080/setup
User-Agent: Mozilla/5.0 (X11; Linux armv7l) AppleWebKit/537.36 (KHTML, like Gecko) Raspbian Chromium/74.0.3729.157 Chrome/74.0.3729.157 Safari/537.36
There's a lot going on in this question.
Firstly, let's focus on this bit:
function getTeams() {
var returnVal;
axios({
method: 'get',
url: REST_API + '/teams',
responseType: 'json'
})
.then(function (response) {
console.log(response.data); //Is what I want to return
returnVal = response.data;
});
console.log(returnVal); //Is undefined
return returnVal.data;
}
The first log line is logging the correct value but the second log line is undefined.
This is to be expected. It has nothing to do with CORS or proxying.
The problem is that the axios request is asynchronous, so the then callback won't be called until some point in the future. By that point the function will have returned. You should find that the log lines are being logged in the 'wrong' order for the same reason.
You can't return an asynchronously retrieved value synchronously from a function. Using async/await may make it look like you can but even that is a fudge, hiding the underlying promises.
You have two options:
Return a promise from getTeams. That kicks the problem of waiting up to the calling code.
If you are inside a component you can set a data property inside the then callback. This is instead of returning a value.
Then we have the other parts of your question.
It would seem that you have successfully managed to configure a proxy. Difficult to be sure but from everything you've included in the question that seems to be working correctly. You wouldn't be getting the correct data in your console logging if the proxy wasn't working.
However, there are a lot of CORS headers in your response. If you're using a proxy then you don't need the CORS headers. A proxy is an alternative to CORS, you don't use both.
As for why your CORS request was failing prior to using a proxy, it's difficult to say from the information provided in the question.
I'm using zapworks studio to develop an AR experience. It uses Z.ajax to make the ajax calls. I make a GET request and a POST request. I'm also using smileupps to host couchdb(they have free hosting). Here's the CORS configuration:
credentials: false; headers:Accept, Authorization, Content-Type, Origin;
methods: GET,POST,PUT,DELETE,OPTIONS,HEAD; origins: *
Everything works fine when launching ZapWorks Studio on windows. When scanning the zapcode with an android device, however, the post ajax call fails. Only the post. I am using basic authentication. I enforce that only the admin can manage the database on couchdb. I can access the host from both the desktop and the phone from a web browser to do everything manually.
I tried everything I could of to solve the problem: remove authentication, change the CORS configuration...nothing works. I thought it was an issue with CORS but everything works fine on windows and on the mobile just the POST fails...I keep getting a status code of 0.
EDIT - New info, testing on apitester also works on the desktop and mobile.
EDIT - Here's the zpp to show the logic
EDIT - Tried with REST Api Client on my phone and it worked as well. This can only be a CORS issue or something with zapworks. Weird that it works on windows but not on the phone.
EDIT - I found out what the problem is, but not how to fix it. So I set a proxy to debug the requests made from zapworks studio following this tutorial. It seems that it does a preflight request but gets the response
"HTTP/1.1 405 Method Not Allowed"
even though the payload is
{"error":"method_not_allowed","reason":"Only DELETE,GET,HEAD,POST
allowed"}.
Here's the request:
OPTIONS /ranking HTTP/1.1
Host: somehost.com
Connection: keep-alive
Access-Control-Request-Method: POST
Origin: null
User-Agent: Mozilla/5.0 (Linux; Android 8.0.0; SM-G950U1 Build/R16NW; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/67.0.3396.87 Mobile Safari/537.36
Access-Control-Request-Headers: authorization,content-type,x-requested-with
Accept: */*
Accept-Encoding: gzip, deflate
Accept-Language: en-US
X-Requested-With: com.zappar.Zappar
and the response:
HTTP/1.1 405 Method Not Allowed
Server: CouchDB/1.6.0 (Erlang OTP/R15B01)
Date: Mon, 18 Jun 2018 21:22:12 GMT
Content-Type: text/plain; charset=utf-8
Content-Length: 76
Cache-Control: must-revalidate
Allow: DELETE,GET,HEAD,POST
Access-Control-Expose-Headers: Cache-Control, Content-Type, Server
Access-Control-Allow-Origin: null
Connection: keep-alive
{"error":"method_not_allowed","reason":"Only DELETE,GET,HEAD,POST allowed"}
which clearly shows that POST is allowed...
On the windows side, there doesn't seem to be a preflight request for some reason and my guess is that's why it works. Now the question is how do I configure CORS on couchdb to work on android. These are the configurations available:
enable_cors: true
credentials: false
headers:Accept, Authorization, Content-Type, Origin
methods:GET,POST,PUT,DELETE,OPTIONS,HEAD
origins:*
This is the code:
const Open_SansRegular_ttf0 = symbol.nodes.Open_SansRegular_ttf0;
parent.on("ready", () => {
const Plane0 = symbol.nodes.Plane0;
let ajaxParameters : Z.Ajax.Parameters = {
url: "https://something.smileupps.com/test/_all_docs?include_docs=true",
headers: {"Authorization": "Basic my64encoding"},
method: "GET",
timeout: 3000
};
// Perform the AJAX request
Z.ajax(ajaxParameters, (statusCode, data, request) => {checkRequest(statusCode, data);});
ajaxParameters = {
url: "https://something.smileupps.com/test",
headers: {"Content-Type":"application/json", "Authorization": "Basic my64encoding"},
method: "POST",
body: '{"name" : "asdasd", "something": 234}',
timeout: 3000
};
Z.ajax(ajaxParameters, (statusCode, data, request) => {checkRequest(statusCode, data);});
});
function checkRequest(statusCode, data) {
if (statusCode === 0) {
Open_SansRegular_ttf0.text("Unable to connect - check network connection.");
console.log("Unable to connect - check network connection.");
return;
}
if (statusCode < 200 || statusCode >= 300) {
Open_SansRegular_ttf0.text("HTTP request failed: " + statusCode);
console.log("HTTP request failed: " + statusCode);
return;
}
// Attempt to parse the data returned from the AJAX request as JSON
let parsedData;
try {
// https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse
parsedData = JSON.parse(data);
} catch (e) {
Open_SansRegular_ttf0.text("Unable to parse JSON: " + e);
console.log("Unable to parse JSON: " + e);
return;
}
return parsedData;
}
EDIT
Here's the request on windows
Accept:*/*
Accept-Encoding:gzip, deflate
Accept-Language:en-US
Authorization:Basic mybase64encoding
Connection:keep-alive
Content-Length:37
Content-Type:application/json
Host:http://something.smileupps.com/test
Origin:file://
User-Agent:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) ZapWorksStudio/4.0.4-stable Chrome/58.0.3029.110 Electron/1.7.9 Safari/537.36
X-DevTools-Request-Id:3680.9
X-Requested-With:XMLHttpRequest
and the response:
Access-Control-Allow-Origin:file://
Access-Control-Expose-Headers:Cache-Control, Content-Type, ETag, Server
Cache-Control:must-revalidate
Content-Length:95
Content-Type:text/plain; charset=utf-8
Date:Mon, 18 Jun 2018 21:36:22 GMT
ETag:"1-512f89feb3d0a88781119e772ec6fd7b"
Location:http://something.smileupps.com/test
Server:CouchDB/1.6.0 (Erlang OTP/R15B01)
No preflight.
Your problem is in the request: Origin: null is usually what you get when the Web page containing the xhr request is opened with the file: rather than the http or https protocol. You won't get any successful CORS request with such an origin.
I am attempting to build a javascript application.
I am unable to get a DELETE request authenticated via IAM.
The API gateway delete route has been configured to use AWS_IAM authentication. Cognito user group has a role attached which grants access to invoke the delete route.
I've signed the request using AWS.Signers.V4
var httpRequest = new AWS.HttpRequest("https://bo5o2odxxx.execute-api.ap-south-1.amazonaws.com/wrhprod/"+uri, "ap-south-1");
httpRequest.headers.host = "https://bo5o2odxxx.execute-api.ap-south-1.amazonaws.com";
httpRequest.headers['Content-Type'] = "application/json";
httpRequest.method = method;
var v4signer = new AWS.Signers.V4(httpRequest, "execute-api", true);
v4signer.addAuthorization(awsCredentials, AWS.util.date.getDate());
delete httpRequest.headers['host']
delete httpRequest.headers['X-Amz-User-Agent']
I am using axios to send the delete request:
axios.delete('/events/2017/1523502329582',
{ headers: httpRequest.headers})
.then(response => {
//success
})
.catch(error => {
//fail
});
This is my request Header:
:authority: bo5o2odxxx.execute-api.ap-south-1.amazonaws.com
:method: DELETE
:path: /wrhprod/events/2017/1523502329582
:scheme: https
accept: application/json, text/plain, /
accept-encoding: gzip, deflate, br
accept-language: en-US,en;q=0.9
authorization: AWS4-HMAC-SHA256 Credential=ASIAIGIXC2II7KWVVUVA/20180413/ap-south-1/execute-api/aws4_request, SignedHeaders=host;x-amz-date;x-amz-security-token;x-amz-user-agent, Signature=f1b12cf3c1a3693f259e2f0079231974d6de0e4225bca0af3754a32eecf95277
origin: http://localhost:3000
referer: http://localhost:3000/events
user-agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36
x-amz-date: 20180413T071741Z
x-amz-security-token: AgoGb3JpZ2luEAwaCmFwLXNvdXRoLTEigAIBwvwgU/vlYPZI1+XYbJUieH7lQB1XI32w08GaX0MjobxyfhFK7J3md5GaKlPdO3I+fqjYpBWOlrqNNllgjKTLZwNOx7SxrVq5T57qk27nq6kp1Y5nSDTy+wj6pHVbSmzRgrfqvOgsgWrU6NsB41taHLaN3sjQaneSC7/phQ3+UvdjQrEI7egI7TikiUs/DW6oQWMupW/75c9GEVnoA2RRdYmVqVh//OmbWdG6DMk09ritP6eLpUYvWHGrMNniGnT2Rj+3kbOgSst0JrKLwssOsO3lIm+iDxSk3NGoKRUX4iB/Lnv7XQnUaFoK2PC0DNyj9XnJVn0RXoXCPOOwPf9wKqwFCEAQABoMMTQ0MTUzMjMxNzA0Igwr7GTDa3MwS/6L7RIqiQU4WK45J//oxnc98LgRZOApKGYPyRfiDgd+LHG006GHDJTodDTysv1YIkLbOq6Da1d6ENpwdkW7h8OgtR4r+BoOPeP7h+vV55LJHexPGAGC8GKimK8iKFLjvyy1ArGWGb9FEbYtsJkjjxFZw2uZJ3ex3YWQk5UiBDkuJd8paU8rqSctcF/0SLFZyK77AndiLs7Ir3AwBvlQvOh+J3Q8MCfAuRLGOAT1VTYOMis/ZL7cczi1YRWK+7jlRdeoeQu/aP9Y07SbxRxzIh7YyhFBilLXUslRiyeKiehYK6ufI/czC2bDipegBmCAFiEff/PKvBinSUJRTkSJODmh6E25OVerbbSBgI1aCGj+b3bRiBiMwu+kIF77czK18jBfE5OeexKfh+r1w2puyYDwPgQMz9ki5BdQtHvzm0/p8W88+tPGNB0EO7E4TyWtfJ0HyLU6wgVpf4LB9YPDeUxoR8JdB+QLCXNDPdFEuWPQRgm4MgngAyHwVn+NnFsBk1U/GNHabWeX0k+PsxNn5LJ6u4RQCDP0YDsGrQmIO6DIrUWidBZ00XMeaJXWrsgHb/6qINijvg3sk1y9P7kxEZyfarotDEjqLRjpyUBufRfiCVccQ5bF0MeOxxMN4ZFC7mX7xtaSQKcmv2sG1uJus9d7yyd3phQ4FluiI77UE5CVx3bkdRlEObRXB/DyCv+gfk3VfouIchF8xNpMU1jmaHN5+rB0/lbTMxVmEX8qYc6UdZXIIWRm2spB2YwnacBhC0Q36CnCwU1hcRo7YhcminiCPQy6+7OrOTLLXKAenRjNIuPYGAaZQl1MgPMBwFpPGAdbrJG/iWleNf5fN+dettOD18VT8jrmdQ0jRM5N9OjEMJqvwdYF
This is the AWS response header:
content-length: 192
content-type: application/json
date: Fri, 13 Apr 2018 07:17:41 GMT
status: 403
x-amz-apigw-id: FRLvXEDeBcwFuLQ=
x-amzn-errortype: InvalidSignatureException
x-amzn-requestid: c0f040c3-3eea-11e8-bd7a-dd445896cd03
I've spent hours on this & have not found a solution, please let me know if I can supply any other information to help troubleshoot.
This same API was working using cognito as an API gateway authorizer, I switches to IAM so that I may have more fine grained control on the cognito users.
I was not able to get AWS.Signers.V4 to work. From what I read, this API is not public yet.
I was able to get my APP working using a custom client to sign the request. It is available for download Here
First off, I just wanted to say that I have read through all of the other threads relating to this topic, but haven't had any luck. Here's a breakdown of the issue:
Goals
Retrieve a CSRF token from Sails when the Ember Application starts
Inject that CSRF token into every AJAX request that is initiated from the Ember Application
To satisfy goal 1, I created an Ember Initializer that runs when the application first boots up (if there is a better place for this, I'm totally open to suggestions). To satisfy goal 2, I retrieve the CSRF token from Sails and then attempt to use Ember.$.ajaxSetup() to ensure the CSRF token is passed either as a header (X-CSRF-Token) or parameter (_csrf). I also ensure that I'm using the withCredentials option to ensure the cookie is set. Here's the code:
// initializers/csrf.js
import Ember from 'ember';
import config from '../config/environment';
export function initialize() {
Ember.$.get(config.APP.API_URL + '/csrfToken').then(function(result) {
Ember.$.ajaxSetup({
data: {
'_csrf': result._csrf
},
xhrFields: { withCredentials: true }
});
}, function(error) {
console.log(error);
});
}
export default {
name: 'csrf',
initialize: initialize
};
All of this appears to work as I can see in Chrome dev tools that the CSRF token is being retrieved and when I make an AJAX request, I see the data appended to the POST data or added as a header (tried both options). Here's the code I'm running and all of the associated headers:
Ember.$.post(config.APP.API_URL + '/auth/register', {
'email': _this.get('email'),
'password': _this.get('password')
}).then(function(response) {
console.log('It worked!');
});
Request Headers
POST /auth/register HTTP/1.1
Host: localhost:1337
Connection: keep-alive
Content-Length: 82
Accept: */*
Origin: http://localhost:4200
CSP: active
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.130 Safari/537.36
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
DNT: 1
Referer: http://localhost:4200/signup
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.8
Cookie: sails.sid=s%3AbrABhErTY3-ytTWOKFJ2KBj7DCAzaLDc.apD60Sd%2BW85GSbTfJ7E3B2PrUwnhOsW6GlNpZTu9jFg
Form Data
_csrf:yP7GDiU2-YGmLBfBvQtMPT3-hRpnfK0x-AfA
email:test#test.com
password:q1w2e3r4
Response Headers
HTTP/1.1 403 Forbidden
Vary: X-HTTP-Method-Override
Access-Control-Allow-Origin: http://localhost:4200
Access-Control-Allow-Credentials: true
Content-Type: text/html; charset=utf-8
Content-Length: 13
Date: Thu, 09 Jul 2015 08:11:34 GMT
Connection: keep-alive
As you can see from the Response headers, I end up receiving a 403 Forbidden - CSRF Mismatch from Sails. Now, here's where it gets a little weird: first, I'm able to run this just fine with Postman. I retrieve a token and then post that token along with the data to the /auth/register url and it works as expected.
I'm also tried removing the initializer and running the following code:
Ember.$.ajaxSetup({
xhrFields: { withCredentials: true }
});
Ember.$.get(config.APP.API_URL + '/csrfToken').then(function(result) {
Ember.$.post(config.APP.API_URL + '/auth/register', {
'email': _this.get('email'),
'password': _this.get('password'),
'_csrf': result._csrf
}).then(function(response) {
console.log('It worked!');
});
});
This works. However, at this point, I'm at somewhat of a loss as to what the issue actually is. Appreciate any help I can get.
Thanks in advance!
James
#jdixon04, Can you try URL-encoding the CSRF token before sending it through POST? The token mismatch will occur if the token is getting altered from the original.
I found this issue in Github: https://github.com/balderdashy/sails/issues/2266.
I hope this will solve your issue. Do try it and let me know if it works. Thanks.
#jdixon04, got here from your post on my github issue. Actually, isn't the CSRF token going to change at each request made to the server? Then you approach to fix the token when the frontend load cannot cope with this, you may have to fetch the token before each request and use ajaxPrefilter to pass it to the request.
Is that actually related to ember-data-sails? It seems to me you're doing pure ajax here! If you look in my config, you'll realise that pure ajax calls (for authentication as well) are exempted from csrf as I could not make it work as I wished :\ .
Add the x-csrf-token header like this:
Ember.$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': result._csrf
},
xhrFields: { withCredentials: true }
});