link274 link275 link276 link277 link278 link279 link280 link281 link282 link283 link284 link285 link286 link287 link288 link289 link290 link291 link292 link293 link294 link295 link296 link297 link298 link299 link300 link301 link302 link303 link304 link305 link306 link307 link308 link309 link310 link311 link312 link313 link314 link315 link316 link317 link318 link319 link320 link321 link322 link323 link324 link325 link326 link327 link328 link329 link330 link331 link332 link333 link334 link335 link336 link337 link338 link339 link340 link341 link342 link343 link344 link345 link346 link347 link348 link349 link350 link351 link352 link353 link354 link355 link356 link357 link358 link359 link360 link361 link362 link363 link364 link365 link366 link367 link368 link369 link370 link371 link372 link373 link374 link375 link376 link377 link378 link379 link380 link381 link382 link383 link384 link385 link386 link387 link388 link389 link390 link391 link392 link393 link394 link395 link396 link397 link398 link399 link400 link401 link402 link403 link404 link405 link406 link407 link408 link409 link410

[Vue.js] CORS policy No 'Access-Control-Allow-Origin' / 500 (Internal Server Error) Problemcontroller codeclient code

Basically, I’m trying to get a username by id from Sequelize. The problem is that when either stuck with a CORS problem or 500 Internal Server error depending on the response(status)

cors and 500

controller code

async getUserFromUserId (req, res) {
try {
// const user = await User.findByPk(req.body.id)
const id = req.body.id
const user = await User.findByPk(id)
res.send(user.username)
} catch (err) {

// or res.status(some random number).send() for CORS problem to appear

res.status(500).send({
error: ‘an error has occured trying to fetch the users id’
})
}
},

client code

this.notifiedUser = (await UserService.getUserFromUserId({id: UserId})).data

I get a Status: 200 OK from postman though.
Postman Solution

Edit:
there is seen how the other Solution for the cors thingy, but the solutions does not specify as to why I get “undefined” results after resolving the cors problem.

Solution :

So, CORS is actually really obnoxious in this regard, but there’s a fairly straightforward way to fix this. It’s a super useful security feature, though it is frustrating at best sometimes.

the browser does what is called a Preflight Request, which is of the http verb OPTIONS. the browser calls whatever route you want, but instead of what you asked it to do, it calls using OPTIONS first. the server should accept all routes that the client can ask for with the OPTIONS method, and the server should respond with the following headers to be an externally available, cross-origin API.

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, …

(note, you should not put the … in, but you can put any HTTP verb in this list)

If you require the own headers (for auth purposes), you want to add this header for Client -> Server.

Access-Control-Allow-Headers: YourHeader, YourHeader2, YourHeader3

You want to add this one for Server -> Client

Access-Control-Expose-Headers: YourHeader,YourHeader3

Note that the OPTIONS call is an entirely separate call that you should handle as well as the GET method.

You’ve now told the browser what it is allowed to ask for, and what it can expect to get back from the API. If you don’t respond to the OPTIONS request, the browser terminates the request, resulting in a CORS error.

I’m going to take a gander at a guess and assume you’re likely using Express, which this answer describes how to set the headers on.

What do the headers mean, in English?

Access-Control-Allow-Origin
From where are clients allowed to access this resource (endpoint)? This can match partial domains with wildcards, or just a * to allow anywhere.

Access-Control-Allow-Methods
What HTTP methods are permissible on this route?

Access-Control-Expose-Headers
When I get a response from the server, what should I (the browser) expose to the client-side?

Access-Control-Allow-Headers
What am I as the client side allowed to send as headers?

Solution 2:

If the origin is from localhost, Chrome usually blocks any CORS request originating from this origin.

You can install this extension:

https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=en

Or you can disable the security when running chrome (add the flag):

--disable-web-security