Clash Royale CLAN TAG#URR8PPP

No 'Access-Control-Allow-Origin' header is present on the requested resource with Vuejs and Nodejs

Backend (nodejs)

app.use(function(req, res, next)
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8080');
// Request methods you wish to allow
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With, content-type, Authorization, Content-Type');
res.setHeader('Access-Control-Allow-Credentials', true);
next(createError(404));
);


Frontend vuejs

axios.post(`http://localhost:5000/api/v1/users/uploadDocuments?access_token=`+store.state.token,

data: formData,
//accessToken: store.state.token
,
headers:
'Content-Type': 'Application/json',
// 'x-access-token': localStorage.getItem('token')


).then (function (response)
this.potato = response.data
)


I am getting the following error:

Failed to load http://localhost:5000/api/v1/users/uploadDocuments?access_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.et: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.


I have added Access-Control-Allow-Origin in the backend but the error still persists. How can I fix this ?

2 Answers
2

Try this instead of what you have now

app.use((req, res, next) =>
res.header("Access-Control-Allow-Origin", "*");
res.header(
"Access-Control-Allow-Headers",
"Origin,X-Requested-With,Content-Type,Accept,Authorization"
);
if (req.method === 'OPTIONS')
res.header('Access-Control-Allow-Methods', 'PUT,POST,GET')
return res.status(200).json();

next();
);


Install CORS

npm install cors


Now, include it into app()

var express = require('express')
var cors = require('cors')
var app = express()

app.use(cors())


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.