Vercel deployed react frontend issue connecting with frappe backend

Frappe Framework Customization
,
1

We have frappe backend hosted all the request like /api/method/login or /api/resource/Lead are served from here.

We have vite + react frontend project:

Development environment:

  • We can do
    • the login
    • set cookies
    • perform CRUD

Production environment:

  • Vercel
frappeClient.ts:107 
 GET https://eits.thebigocommunity.org/api/method/frappe.auth.get_logged_user 403 (Forbidden)
Promise.then        
getUserInfo    @   frappeClient.ts:107
login    @   AuthContext.tsx:105
await in login        
R    @   LoginForm.tsx:54

frappeClient.ts:39 API Error: 
{status: 403, message: 'Request failed with status code 403', url: '/api/method/frappe.auth.get_logged_user'}
(anonymous)    @   frappeClient.ts:39
Promise.then        
getUserInfo    @   frappeClient.ts:107
login    @   AuthContext.tsx:105
await in login        
R    @   LoginForm.tsx:54
AuthContext.tsx:117 Failed to get user info after login: 
Be {message: 'Request failed with status code 403', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}
code
: 
"ERR_BAD_REQUEST"
config
: 
adapter
: 
(3) ['xhr', 'http', 'fetch']
allowAbsoluteUrls
: 
true
baseURL
: 
"https://eits.thebigocommunity.org"
data
: 
undefined
env
: 
{FormData: ƒ, Blob: ƒ}
headers
: 
tn {Accept: 'application/json, text/plain, */*', Content-Type: 'application/json'}
maxBodyLength
: 
-1
maxContentLength
: 
-1
method
: 
"get"
timeout
: 
10000
transformRequest
: 
[ƒ]
transformResponse
: 
[ƒ]
transitional
: 
{silentJSONParsing: true, forcedJSONParsing: true, clarifyTimeoutError: false}
url
: 
"/api/method/frappe.auth.get_logged_user"
validateStatus
: 
ƒ (a)
withCredentials
: 
true
xsrfCookieName
: 
"XSRF-TOKEN"
xsrfHeaderName
: 
"X-XSRF-TOKEN"
[Prototype](project/atulraj-mep-erp/wiki/Prototype)
: 
Object
message
: 
"Request failed with status code 403"
name
: 
"AxiosError"
request
: 
XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 10000, withCredentials: true, upload: XMLHttpRequestUpload, …}
response
: 
{data: {…}, status: 403, statusText: '', headers: tn, config: {…}, …}
status
: 
403
stack
: 
"AxiosError: Request failed with status code 403\n    at ix (https://frappe-frontend-three.vercel.app/assets/index-BxHSQFcD.js:53:1083)\n    at XMLHttpRequest.A (https://frappe-frontend-three.vercel.app/assets/index-BxHSQFcD.js:53:5718)\n    at Dr.request (https://frappe-frontend-three.vercel.app/assets/index-BxHSQFcD.js:55:2069)\n    at async Object.getUserInfo (https://frappe-frontend-three.vercel.app/assets/index-BxHSQFcD.js:56:6676)\n    at async login (https://frappe-frontend-three.vercel.app/assets/index-BxHSQFcD.js:56:9768)\n    at async R (https://frappe-frontend-three.vercel.app/assets/index-BxHSQFcD.js:241:1090)\n    at async https://frappe-frontend-three.vercel.app/assets/index-BxHSQFcD.js:56:32224"
[Prototype](project/atulraj-mep-erp/wiki/Prototype)
: 
Error
login    @   AuthContext.tsx:117
await in login        
R    @   LoginForm.tsx:54

Cookies are not being set, as the other CRUD APIs are not working .

How should this be resolved?

2 
server: {
    port: 3000,
    host: true,
    proxy: {
      '/api': {
        target: 'https://eits.thebigocommunity.org',
        changeOrigin: true,
        secure: true,
        cookieDomainRewrite: {
          '*': 'localhost'
        },
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        },
        configure: (proxy, _options) => {
          proxy.on('error', (err, _req, _res) => {
            console.log('🔴 Proxy error:', err.message);
          });
          proxy.on('proxyReq', (req, _res) => {
            console.log('🔵 Sending Request:', req.method, req.path || '(no path)');
            const cookieHeader = req.getHeader && req.getHeader('cookie');
            if (cookieHeader) {
              console.log('🍪 Cookies:', cookieHeader);
            }
          });
          proxy.on('proxyRes', (proxyRes, req, _res) => {
            console.log('🟢 Response:', proxyRes.statusCode, req.url);
            if (proxyRes.headers['set-cookie']) {
              console.log('🍪 Set-Cookie:', proxyRes.headers['set-cookie']);
            }
          });
        },
      }
    }
  },
  preview: {
    port: 4173,
    host: true,
    proxy: {
      '/api': {
        target: 'https://eits.thebigocommunity.org',
        changeOrigin: true,
        secure: true,
        cookieDomainRewrite: {
          '*': 'localhost'
        },
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        },
        configure: (proxy, _options) => {
          proxy.on('error', (err, _req, _res) => {
            console.log('🔴 Proxy error:', err.message);
          });
          proxy.on('proxyReq', (req, _res) => {
            console.log('🔵 Sending Request:', req.method, req.path || '(no path)');
            const cookieHeader = req.getHeader && req.getHeader('cookie');
            if (cookieHeader) {
              console.log('🍪 Cookies:', cookieHeader);
            }
          });
          proxy.on('proxyRes', (proxyRes, req, _res) => {
            console.log('🟢 Response:', proxyRes.statusCode, req.url);
            if (proxyRes.headers['set-cookie']) {
              console.log('🍪 Set-Cookie:', proxyRes.headers['set-cookie']);
            }
          });
        },
      }
    },

in vite.config.js

i just copied the server to preview.

{
  "framework": "vite",
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "installCommand": "npm install",
  "devCommand": "npm run dev",
  "rewrites": [
    {
      "source": "/api/(.*)",
      "destination": "https://eits.thebigocommunity.org/api/$1"
    }
  ]
}

Updated the vercel.json with this source and destination.