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: GitHub - 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.