Wasp•4w ago

CORS Issue

Wasp version: 0.13.2 Backend: https://api.mydomain.com I have read other issues regarding CORS and I have deployed everything as the documentation recommends: I have a serverSetup.ts file which has the following:

import cors from 'cors'
import { config, type MiddlewareConfigFn } from 'wasp/server'

export const serverMiddlewareFn: MiddlewareConfigFn = (middlewareConfig) => {
  // Example of adding an extra domains to CORS.
  middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, 'https://mydomain.com'] }))
  return middlewareConfig
}

import cors from 'cors'
import { config, type MiddlewareConfigFn } from 'wasp/server'

export const serverMiddlewareFn: MiddlewareConfigFn = (middlewareConfig) => {
  // Example of adding an extra domains to CORS.
  middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, 'https://mydomain.com'] }))
  return middlewareConfig
}

As far as I know config.frontendUrl should be already https://mydomain.com but I have added since I am not able to get it working. In main.wasp I have added the following:

  wasp: {
    version: "^0.13.2"
  },
  server: {
    middlewareConfigFn: import { serverMiddlewareFn } from "@src/serverSetup"
  },

  wasp: {
    version: "^0.13.2"
  },
  server: {
    middlewareConfigFn: import { serverMiddlewareFn } from "@src/serverSetup"
  },

But I am still getting on client:

[Error] XMLHttpRequest cannot load https://api.mydomain.com/auth/me due to access control checks.
[Error] Failed to load resource: Origin https://mydomain.com is not allowed by Access-Control-Allow-Origin. Status code: 404 (me, line 0)

[Error] XMLHttpRequest cannot load https://api.mydomain.com/auth/me due to access control checks.
[Error] Failed to load resource: Origin https://mydomain.com is not allowed by Access-Control-Allow-Origin. Status code: 404 (me, line 0)

NGINX config:

    location / {
        proxy_pass http://localhost:3001;  # Forward requests to the backend server
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_cache_bypass $http_upgrade;
    }

    location / {
        proxy_pass http://localhost:3001;  # Forward requests to the backend server
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_cache_bypass $http_upgrade;
    }

Any idea what I am missing?

8 Replies

kapa.ai•4w ago

Hi @mgp25. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided, it seems you're encountering a CORS (Cross-Origin Resource Sharing) issue with your Wasp application. Let's analyze the problem and suggest some solutions: 1. CORS Configuration: Your CORS configuration in serverSetup.ts looks correct. However, there's a discrepancy between the domains you've mentioned. You're allowing <https://mydomain.com,> but the error message shows the request is coming from <https://wislearn.io.> Make sure to include all necessary domains in your CORS configuration Configuring Middleware (https://wasp-lang.dev/docs/advanced/middleware-config#1-customize-global-middleware).

middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, '<https://mydomain.com',> '<https://wislearn.io']> }))

middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, '<https://mydomain.com',> '<https://wislearn.io']> }))

2. Environment Variables: Ensure that you've set the correct environment variables for your server, particularly WASP_WEB_CLIENT_URL. This should be set to the URL where your frontend is hosted Deploying Manually (https://wasp-lang.dev/docs/advanced/deployment/manually#environment-variables). 3. NGINX Configuration: Your NGINX configuration looks fine for proxying requests to your backend. However, you might want to add some CORS headers to your NGINX configuration as an additional layer of security:

location / {
    proxy_pass <http://localhost:3001;>
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_cache_bypass $http_upgrade;
# Add CORS headers
    add_header 'Access-Control-Allow-Origin' '<https://wislearn.io'> always;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
    add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization' always;
    add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;

    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain; charset=utf-8';
        add_header 'Content-Length' 0;
        return 204;
    }
}

location / {
    proxy_pass <http://localhost:3001;>
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_cache_bypass $http_upgrade;
# Add CORS headers
    add_header 'Access-Control-Allow-Origin' '<https://wislearn.io'> always;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
    add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization' always;
    add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;

    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain; charset=utf-8';
        add_header 'Content-Length' 0;
        return 204;
    }
}

4. 404 Error: The error message indicates a 404 status code, which suggests that the /auth/me endpoint might not exist or is not accessible. Double-check that this route is correctly defined in your Wasp application. 5. API Namespace: If you're using custom API endpoints, make sure you've configured the apiNamespace correctly in your Wasp file Making Sure CORS Works (https://wasp-lang.dev/docs/advanced/apis#making-sure-cors-works). 6. Server URL: Ensure that the WASP_SERVER_URL environment variable is set correctly to <https://api.mydomain.com> Deploying Manually (https://wasp-lang.dev/docs/advanced/deployment/manually#environment-variables). If you've verified all these points and are still experiencing issues, you might want to try upgrading to the latest Wasp version, as suggested in a similar case Discord support thread (https://discord.com/channels/686873244791210014/1201898985300971540). If the problem persists, you may need to investigate further by adding more detailed logging on both the client and server sides to pinpoint exactly where the request is failing. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @mgp25, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

Filip•4w ago

Hey @mgp25, let's figure it out. First question, do you have the client deployed somewhere? Can you share it? After that, where are you seeing you the XMLHttpRequest error? Debugging steps: - Can you access the route by curling the domain? - Which headers does it return? - If that's incorrect, can you access the route by curling localhost?

mgp25OP•4w ago

Hey @Filip ! Yes, I have deployed it on a VPS under a domain, I dont mind sharing the access via DM XMLHttpRequest is shown in the web console (browser). So frontend not able to communicate to backend because of cors. As per the headers returns when a curl is made to the backend:

* Request completely sent off
< HTTP/2 403
< date: Thu, 28 Nov 2024 17:03:23 GMT
< content-type: text/html
< cf-cache-status: DYNAMIC
< vary: accept-encoding
< report-to: {"endpoints":[{"url":"https:\/\/a.nel.cloudflare.com\/report\/v4?s=fAl%2B7QyDdr%2B2zdG%2F0Cr9thKUS%2FvEpjoBaqjEJZGw2WDy7%2BcT4Owsg7hGJNC66X9ac%2FGK%2B3JZlQxBvm0w447yRPsrOrD%2FcMGj0kf24eeoP6xzgcJ6Y324sfmNHUozgC6xN1s%3D"}],"group":"cf-nel","max_age":604800}
< nel: {"success_fraction":0,"report_to":"cf-nel","max_age":604800}
< server: cloudflare
< cf-ray: 8e9bee5d7c09cbb6-MAD
< alt-svc: h3=":443"; ma=86400
< server-timing: cfL4;desc="?proto=TCP&rtt=46918&min_rtt=41851&rtt_var=12898&sent=9&recv=12&lost=0&retrans=0&sent_bytes=2927&recv_bytes=584&delivery_rate=67212&cwnd=249&unsent_bytes=0&cid=97a920645e318a91&ts=211&x=0"
<
<html>
<head><title>403 Forbidden</title></head>
<body>
<center><h1>403 Forbidden</h1></center>
<hr><center>nginx/1.18.0 (Ubuntu)</center>
</body>
</html>
* Connection #0 to host api.mydomain.com left intact

* Request completely sent off
< HTTP/2 403
< date: Thu, 28 Nov 2024 17:03:23 GMT
< content-type: text/html
< cf-cache-status: DYNAMIC
< vary: accept-encoding
< report-to: {"endpoints":[{"url":"https:\/\/a.nel.cloudflare.com\/report\/v4?s=fAl%2B7QyDdr%2B2zdG%2F0Cr9thKUS%2FvEpjoBaqjEJZGw2WDy7%2BcT4Owsg7hGJNC66X9ac%2FGK%2B3JZlQxBvm0w447yRPsrOrD%2FcMGj0kf24eeoP6xzgcJ6Y324sfmNHUozgC6xN1s%3D"}],"group":"cf-nel","max_age":604800}
< nel: {"success_fraction":0,"report_to":"cf-nel","max_age":604800}
< server: cloudflare
< cf-ray: 8e9bee5d7c09cbb6-MAD
< alt-svc: h3=":443"; ma=86400
< server-timing: cfL4;desc="?proto=TCP&rtt=46918&min_rtt=41851&rtt_var=12898&sent=9&recv=12&lost=0&retrans=0&sent_bytes=2927&recv_bytes=584&delivery_rate=67212&cwnd=249&unsent_bytes=0&cid=97a920645e318a91&ts=211&x=0"
<
<html>
<head><title>403 Forbidden</title></head>
<body>
<center><h1>403 Forbidden</h1></center>
<hr><center>nginx/1.18.0 (Ubuntu)</center>
</body>
</html>
* Connection #0 to host api.mydomain.com left intact

Filip•4w ago

Sure, send it into my DM and we'll take it from there 🙂

mgp25OP•4w ago

Actually, it was a fault on my end, with NGINX config.

tail -n 50 /var/log/nginx/error.log

tail -n 50 /var/log/nginx/error.log

Revealed a misconfiguration caused by certbot applying certain configs on its own. I apologise for this but hopefully this helps out for other users facing similar issues. Thank you!

Killshot•4w ago

Hey @mgp25 Do you mind if i pick your brain in dms regarding a similar issue with deploying via VPS?

mgp25OP•4w ago

Sure

Filip•4w ago

No worries, it did smell like a reverse proxy issue. For others reading this, I recommend following these steps: https://discord.com/channels/686873244791210014/1311720333681885214/1311732143281541150 And of course, checking the logs (nice thinking @mgp25): https://discord.com/channels/686873244791210014/1311720333681885214/1311778018326220902

Gaming

Programming

CORS Issue