[▲ Vercel Community](/) · [Categories](/categories) · [Latest](/latest) · [Top](/top) · [Live](/live)

[Help](/c/help/9)

# Account a cors issue in my expo project

291 views · 0 likes · 5 posts


Hongran997 (@hongran997) · 2024-08-06

<!-- Be sure to include all detail needed to let others see the same problem -->
My project is created by expo. And I want to call a online service(https://shop.huanghanlian.com/) as my back end. 

**Local CORS**: 
I tried to create a express service (proxy.js) and redirect to https://shop.huanghanlian.com/. Then I modified EXPO_PUBLIC_BASE_URL as 'http://localhost:3000'  in .env file. Then I got a error message in cosole.

Access to fetch at 'https://shop.huanghanlian.com/api/feed' (redirected from 'http://localhost:3000/api/feed') from origin 'http://localhost:8081' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
VM44:6 

this is my proxy.js file
```
const express = require('express');
const cors = require('cors');
const morgan = require('morgan');
const { createProxyMiddleware } = require('http-proxy-middleware');
const app = express();

const corsOptions = {
  origin: 'http://localhost:8081', // 允许来自localhost:8081的请求
  optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204
};

app.use(cors(corsOptions));
app.use(morgan('combined'));


app.use(
  '/api',
  createProxyMiddleware({
    target: 'http://shop.huanghanlian.com/api',
    changeOrigin: true,
    onProxyRes(proxyRes, req, res) {
      console.log(req, res);
      proxyRes.headers['Access-Control-Allow-Origin'] = '*'; // 允许任何来源
      proxyRes.headers['Access-Control-Allow-Methods'] = 'GET, POST, PUT, DELETE, OPTIONS';
      proxyRes.headers['Access-Control-Allow-Headers'] = 'Content-Type, Authorization';
    },
  }),
);

app.listen(3000, () => {
  console.log('Proxy server is running on port 3000');
});


```


**Onlink CORS**:
And I also want to deploy my project in vercel. But I still can reproduce cors issue. I try to add headers in vercel.json or add a serverless function in api folder. Both didn't work.

my project site: https://github.com/hongran997/shopping-rn.
feature/expo-web-deploy is my test branch for deploying my web project in vercel.
And feature/local-run is my test branch for running in local.


Pauline P. Narvas (@pawlean) · 2024-08-06

[quote="hongran997, post:1, topic:455"]
```
  origin: 'http://localhost:8081', // 允许来自localhost:8081的请求
```
[/quote]

Did you change your URL here?


Hongran997 (@hongran997) · 2024-08-08

Yes，localhost:8081 is  my front-end link.


Pauline P. Narvas (@pawlean) · 2024-08-08

Have you tried changing it to your production URL?


Hongran997 (@hongran997) · 2024-08-08

I think I can't use express to fix cors issue in production. Cause I am not sure what is EXPO_PUBLIC_BASE_URL in .env.