axios.post gives CORS issue whereas GET is working fine in React using Laravel API
I am trying to create a post using LARAVEL 5.7 local REST api using a React app. I am using axios.post method with crossOrigin:true . I do not understand why get is working and post is not working. Laravel api is on wamp based localhost and React app is running at localhost:3000 My actions/index.js is as follows and the relevant action creator is addPost():-
import axios from 'axios';
export const FETCH = 'FETCH_POSTS';
export const ADD = 'ADD_POST';
const URL = 'http://postsapi.test/api/v1';
export function fetchPosts(){
const url = `${URL}/posts`;
const request = axios.get(url, { crossDomain: true });
//console.log(request);
return{
type: FETCH,
payload: request
}
}
export function addPost(post){
const url = `${URL}/posts`;
console.log(url);
const request = axios.post(url,post);
//console.log(request);
return{
type: ADD,
payload: request
}
}This is the snap shot from browser that shows in preflighted request Access-Control-Allo-Origin is set twice as well
And in console I am getting this issue
Cross-Origin Request Blocked: The Same Origin Policy disallows reading
the remote resource at http://postsapi.test/api/v1/posts. (Reason:
Multiple CORS header ‘Access-Control-Allow-Origin’ not allowed).
reactjs laravel axios
asked Jan 2 at 9:25
Shakeel AhmedShakeel Ahmed
1519
add a comment |
I am trying to create a post using LARAVEL 5.7 local REST api using a React app. I am using axios.post method with crossOrigin:true . I do not understand why get is working and post is not working. Laravel api is on wamp based localhost and React app is running at localhost:3000 My actions/index.js is as follows and the relevant action creator is addPost():-
import axios from 'axios';
export const FETCH = 'FETCH_POSTS';
export const ADD = 'ADD_POST';
const URL = 'http://postsapi.test/api/v1';
export function fetchPosts(){
const url = `${URL}/posts`;
const request = axios.get(url, { crossDomain: true });
//console.log(request);
return{
type: FETCH,
payload: request
}
}
export function addPost(post){
const url = `${URL}/posts`;
console.log(url);
const request = axios.post(url,post);
//console.log(request);
return{
type: ADD,
payload: request
}
}This is the snap shot from browser that shows in preflighted request Access-Control-Allo-Origin is set twice as well
And in console I am getting this issue
Cross-Origin Request Blocked: The Same Origin Policy disallows reading
the remote resource at http://postsapi.test/api/v1/posts. (Reason:
Multiple CORS header ‘Access-Control-Allow-Origin’ not allowed).
reactjs laravel axios
asked Jan 2 at 9:25
Shakeel AhmedShakeel Ahmed
1519
add a comment |
I am trying to create a post using LARAVEL 5.7 local REST api using a React app. I am using axios.post method with crossOrigin:true . I do not understand why get is working and post is not working. Laravel api is on wamp based localhost and React app is running at localhost:3000 My actions/index.js is as follows and the relevant action creator is addPost():-
import axios from 'axios';
export const FETCH = 'FETCH_POSTS';
export const ADD = 'ADD_POST';
const URL = 'http://postsapi.test/api/v1';
export function fetchPosts(){
const url = `${URL}/posts`;
const request = axios.get(url, { crossDomain: true });
//console.log(request);
return{
type: FETCH,
payload: request
}
}
export function addPost(post){
const url = `${URL}/posts`;
console.log(url);
const request = axios.post(url,post);
//console.log(request);
return{
type: ADD,
payload: request
}
}This is the snap shot from browser that shows in preflighted request Access-Control-Allo-Origin is set twice as well
And in console I am getting this issue
Cross-Origin Request Blocked: The Same Origin Policy disallows reading
the remote resource at http://postsapi.test/api/v1/posts. (Reason:
Multiple CORS header ‘Access-Control-Allow-Origin’ not allowed).
reactjs laravel axios
asked Jan 2 at 9:25
Shakeel AhmedShakeel Ahmed
1519
I am trying to create a post using LARAVEL 5.7 local REST api using a React app. I am using axios.post method with crossOrigin:true . I do not understand why get is working and post is not working. Laravel api is on wamp based localhost and React app is running at localhost:3000 My actions/index.js is as follows and the relevant action creator is addPost():-
import axios from 'axios';
export const FETCH = 'FETCH_POSTS';
export const ADD = 'ADD_POST';
const URL = 'http://postsapi.test/api/v1';
export function fetchPosts(){
const url = `${URL}/posts`;
const request = axios.get(url, { crossDomain: true });
//console.log(request);
return{
type: FETCH,
payload: request
}
}
export function addPost(post){
const url = `${URL}/posts`;
console.log(url);
const request = axios.post(url,post);
//console.log(request);
return{
type: ADD,
payload: request
}
}This is the snap shot from browser that shows in preflighted request Access-Control-Allo-Origin is set twice as well
And in console I am getting this issue
Cross-Origin Request Blocked: The Same Origin Policy disallows reading
the remote resource at http://postsapi.test/api/v1/posts. (Reason:
Multiple CORS header ‘Access-Control-Allow-Origin’ not allowed).
import axios from 'axios';
export const FETCH = 'FETCH_POSTS';
export const ADD = 'ADD_POST';
const URL = 'http://postsapi.test/api/v1';
export function fetchPosts(){
const url = `${URL}/posts`;
const request = axios.get(url, { crossDomain: true });
//console.log(request);
return{
type: FETCH,
payload: request
}
}
export function addPost(post){
const url = `${URL}/posts`;
console.log(url);
const request = axios.post(url,post);
//console.log(request);
return{
type: ADD,
payload: request
}
}import axios from 'axios';
export const FETCH = 'FETCH_POSTS';
export const ADD = 'ADD_POST';
const URL = 'http://postsapi.test/api/v1';
export function fetchPosts(){
const url = `${URL}/posts`;
const request = axios.get(url, { crossDomain: true });
//console.log(request);
return{
type: FETCH,
payload: request
}
}
export function addPost(post){
const url = `${URL}/posts`;
console.log(url);
const request = axios.post(url,post);
//console.log(request);
return{
type: ADD,
payload: request
}
}reactjs laravel axios
reactjs laravel axios
asked Jan 2 at 9:25
Shakeel AhmedShakeel Ahmed
1519
asked Jan 2 at 9:25
Shakeel AhmedShakeel Ahmed
1519
asked Jan 2 at 9:25
Shakeel AhmedShakeel Ahmed
1519
asked Jan 2 at 9:25
Shakeel AhmedShakeel Ahmed
1519
asked Jan 2 at 9:25
Shakeel AhmedShakeel Ahmed
1519
1519
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
This happens because the server and client is on different origins.
To overcome this you have to enable Cross-Origin Resource Sharing in your Laravel server as a middleware.
This thread might help you.
answered Jan 2 at 12:20
MuljayanMuljayan
336210
Exact solution...
– Shakeel Ahmed
Jan 2 at 12:34
Hey, Did you find the solution in the link provided ?
– Muljayan
Jan 3 at 2:24
Almost there using that
– Shakeel Ahmed
Jan 3 at 2:25
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54003889%2faxios-post-gives-cors-issue-whereas-get-is-working-fine-in-react-using-laravel-a%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
This happens because the server and client is on different origins.
To overcome this you have to enable Cross-Origin Resource Sharing in your Laravel server as a middleware.
This thread might help you.
answered Jan 2 at 12:20
MuljayanMuljayan
336210
Exact solution...
– Shakeel Ahmed
Jan 2 at 12:34
Hey, Did you find the solution in the link provided ?
– Muljayan
Jan 3 at 2:24
Almost there using that
– Shakeel Ahmed
Jan 3 at 2:25
add a comment |
This happens because the server and client is on different origins.
To overcome this you have to enable Cross-Origin Resource Sharing in your Laravel server as a middleware.
This thread might help you.
answered Jan 2 at 12:20
MuljayanMuljayan
336210
Exact solution...
– Shakeel Ahmed
Jan 2 at 12:34
Hey, Did you find the solution in the link provided ?
– Muljayan
Jan 3 at 2:24
Almost there using that
– Shakeel Ahmed
Jan 3 at 2:25
add a comment |
This happens because the server and client is on different origins.
To overcome this you have to enable Cross-Origin Resource Sharing in your Laravel server as a middleware.
This thread might help you.
answered Jan 2 at 12:20
MuljayanMuljayan
336210
This happens because the server and client is on different origins.
To overcome this you have to enable Cross-Origin Resource Sharing in your Laravel server as a middleware.
This thread might help you.
answered Jan 2 at 12:20
MuljayanMuljayan
336210
answered Jan 2 at 12:20
MuljayanMuljayan
336210
answered Jan 2 at 12:20
MuljayanMuljayan
336210
answered Jan 2 at 12:20
MuljayanMuljayan
336210
336210
Exact solution...
– Shakeel Ahmed
Jan 2 at 12:34
Hey, Did you find the solution in the link provided ?
– Muljayan
Jan 3 at 2:24
Almost there using that
– Shakeel Ahmed
Jan 3 at 2:25
add a comment |
Exact solution...
– Shakeel Ahmed
Jan 2 at 12:34
Hey, Did you find the solution in the link provided ?
– Muljayan
Jan 3 at 2:24
Almost there using that
– Shakeel Ahmed
Jan 3 at 2:25
Exact solution...
– Shakeel Ahmed
Jan 2 at 12:34
Exact solution...
– Shakeel Ahmed
Jan 2 at 12:34
Hey, Did you find the solution in the link provided ?
– Muljayan
Jan 3 at 2:24
Hey, Did you find the solution in the link provided ?
– Muljayan
Jan 3 at 2:24
Almost there using that
– Shakeel Ahmed
Jan 3 at 2:25
Almost there using that
– Shakeel Ahmed
Jan 3 at 2:25
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54003889%2faxios-post-gives-cors-issue-whereas-get-is-working-fine-in-react-using-laravel-a%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
