The following request is giving me a 405 Method not allowed when running from a simple create-react-app generated project from localhost:3000. I really need this app to run outside of the domain (decoupled). This feels very much like a cross origin issue but I'm sending the X-CSRF-TOKEN
header token and have apache configured to accept the headers as well.
No idea what I'm doing wrong...
Host: contenta.loc
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Access-Control-Request-Method: GET
Origin: http://localhost:3000
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.84 Safari/537.36
Access-Control-Request-Headers: authorization,x-csrf-token
Accept: */*
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.9
However, running the same code from within a custom module on the same domain executes as expected.
import React, { Component } from 'react';
import axios from 'axios';
import Querystring from 'query-string';
import SubRequests from 'd8-subrequests';
const URL = 'http://contenta.loc';
class App extends Component {
state = {
csrfToken: '',
oauthToken: {}
};
constructor(props){
super(props);
this.initializeCsrfToken();
this.initializeOauthToken();
}
initializeCsrfToken(){
axios.get(URL + '/session/token')
.then(response => {
this.setState({csrfToken: response.data});
})
.catch((error) => {
console.log('error ' + error);
});
}
initializeOauthToken(){
const data = {
grant_type: 'password',
client_id: '77e40506-4b2a-4317-b6c0-5ed5b27ce886',
client_secret: 'test1123',
username: 'test',
password: 'test'
};
axios.post(URL + '/oauth/token', Querystring.stringify(data))
.then(response => {
this.setState({oauthToken: response.data.access_token});
})
.catch((error) => {
console.log('error ' + error);
});
}
fetchSubrequests() {
const subrequests = new SubRequests(URL + '/subrequests?_format=json');
const AuthStr = 'Bearer '.concat(this.state.oauthToken);
subrequests.add({
uri: '/api/categories'
});
subrequests.add({
uri: '/api/tags'
});
subrequests.add({
uri: '/api/menus'
});
axios.get(subrequests.getUrl(), {
headers: {
Authorization: AuthStr,
'X-CSRF-Token': this.state.csrfToken,
}
}).then(dataresponse => {
console.log(dataresponse);
})
}
render = () => {
return (
<button >
<div onClick ={
() => {this.fetchSubrequests()}
} > Fetch Subrequests</div>
</button>
)
}
}
export default App;
UPDATE:
Here's what my services.yml
cors.config looked like: (THIS IS WRONG???)
# Configure Cross-Site HTTP requests (CORS).
# Read https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
# for more information about the topic in general.
# Note: By default the configuration is disabled.
cors.config:
enabled: true
# Specify allowed headers, like 'x-allowed-header'.
allowedHeaders: ['x-csrf-token,authorization,content-type,accept,origin,x-requested-with']
# Specify allowed request methods, specify ['*'] to allow all possible ones.
allowedMethods: ['POST, GET, OPTIONS, DELETE, PUT']
# Configure requests allowed from specific origins.
allowedOrigins: ['*']
# Sets the Access-Control-Expose-Headers header.
exposedHeaders: true
# Sets the Access-Control-Max-Age header.
maxAge: false
# Sets the Access-Control-Allow-Credentials header.
supportsCredentials: false
This is what my cors.config needs to be for it to work!!
cors.config:
enabled: true
# Specify allowed headers, like 'x-allowed-header'.
# ['x-csrf-token,authorization,content-type,accept,origin,x-requested-with']
allowedHeaders: ['*']
# - '*'
# Specify allowed request methods, specify ['*'] to allow all possible ones.
# ['POST, GET, OPTIONS, DELETE, PUT']
allowedMethods: ['*']
# - '*'
# Configure requests allowed from specific origins.
allowedOrigins: ['*']
# Sets the Access-Control-Expose-Headers header.
exposedHeaders: true
# Sets the Access-Control-Max-Age header.
maxAge: false
# Sets the Access-Control-Allow-Credentials header.
supportsCredentials: false
Here's what my apache.conf
looks like:
<VirtualHost *:80>
ServerName loc
DocumentRoot /Users/justinwinter/Sites
VirtualDocumentRoot /Users/justinwinter/Sites/%-2/docroot
UseCanonicalName Off
Header set Access-Control-Allow-Origin "http://localhost:3000"
Header set Access-Control-Allow-Credentials true
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, PATCH, DELETE"
Header always set Access-Control-Allow-Headers: "Accept, Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token, Authorization"
<Directory "/Users/justinwinter/Sites/*/docroot">
AllowOverride All
Order allow,deny
Allow from all
Require all granted
</Directory>
AddType application/x-httpd-php .php
</VirtualHost>
NOT WORKING FROM A SEPARATE JS REACT APP
The following screenshot shows the result of running the same JS from within the contenta.loc domain (same server as the endpoint)
WORKING FROM WITHIN A CUSTOM MODULE
The following screenshot shows the error when running the JS from within the create-react-app nodejs localhost server.