我已经尝试了关于CORS和React的堆栈溢出的每个答案，但我似乎无法得到任何工作。我想在localhost:3000上运行React，在localhost:9090上运行Express，然后从React发布一些数据到Express，并返回一条消息，说服务器得到了数据。
我总是得到这个错误:
从原点'http://localhost:3000'获取'http://127.0.0.1:9090/api'的访问已被CORS策略阻止:对预飞行请求的响应未通过访问控制检查:请求的资源上不存在'Access- control - allow - origin '标头。如果一个不透明的响应满足你的需要，设置请求的模式为'no-cors'来获取CORS禁用的资源。
在我的服务器中，我有两个文件涉及到这个:
api.js
var express = require("express");
var router = express.Router();
router.get('/', function(req, res, next) {
res.send("API is working properly");
});
router.post('/', function(req, res, next) {
console.log(req.body);
res.setHeader('content-type', 'application/json');
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
res.header("Access-Control-Allow-Origin", "http://localhost:3000");
res.send("result gotten!");
});
module.exports = router;
app.js
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
// Require routes
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var apiRouter = require('./routes/api');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
// Tell express to use specific routes
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/api', apiRouter);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;
在我的客户端我有SchoolForm.js
import React, {Component} from "react";
class SchoolForm extends Component {
/* https://reactjs.org/docs/forms.html */
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
console.log("Form was submitted with value " + this.state.value);
event.preventDefault();
const data = new FormData(this.current);
fetch('http://127.0.0.1:9090/api', {
method: 'POST',
body: data,
headers: {'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
"Access-Control-Allow-Methods": "DELETE, POST, GET, OPTIONS",
"Access-Control-Allow-Headers": "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"},
})
.then(res => res.json())
.then(json => console.log(json))
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
School:
<input type="text" name="schoolName" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
export default SchoolForm;
我也试过在客户端的package.json中设置代理:
{
"name": "maps-app",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:9090",
"dependencies": {
"@testing-library/jest-dom": "^5.11.9",
"@testing-library/react": "^11.2.5",
"@testing-library/user-event": "^12.8.1",
"leaflet": "^1.7.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-leaflet": "^3.1.0",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
我如何通过这个CORS块??
安装cors包
npm i --save cors
然后在express应用程序中，
const app = express();
app.use(cors());
或者你也可以给所选的路由添加cors()，
例如,
app.get('/', cors(), (req,res) => {})
还可以传递cors选项&配置。要查看可用选项，请查看软件包- https://www.npmjs.com/package/cors
注意-如果您需要在create-react-app的开发过程中添加代理服务器，请尝试手动方法。