对于一个项目,我使用了一个带有Axum框架的rust后端。我使用react作为前端。我只想能够向后端发出一个简单的请求。当我使用插件禁用CORS时,一切都正常,但我无法让它与CORS一起工作。我做错了什么?我使用的是chrome浏览器。
后端代码:
async fn main() {
// initialize tracing subscriber with console output
tracing_subscriber::fmt()
.with_env_filter(tracing_subscriber::EnvFilter::from_default_env())
.init();
let cors = CorsLayer::new()
.allow_methods([Method::GET, Method::POST])
.allow_origin(Any);
// build our application with a single route
let app = Router::new()
.route("/", get(hello_world))
.route("/", post(update_data))
.layer(cors);
// run it with hyper on localhost:3000
axum::Server::bind(&"0.0.0.0:5000".parse().unwrap())
.serve(app.into_make_service())
.await
.unwrap();
}
响应前端请求:
import { Middleware } from 'redux';
const postMiddleware: Middleware = store => next => action => {
const result = next(action);
fetch('http://192.168.1.50:5000/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
},
body: JSON.stringify({"title": "hello world!"})
})
.then(response => {
console.log('Response:', response);
})
.catch(error => {
console.error('Error:', error);
});
return result;
};
export default postMiddleware;
2条答案
按热度按时间nbnkbykc1#
尝试
allow_headers
“内容类型”zbwhf8kr2#
如果你想这样做的话,Cors需要在服务器端进行调整。我建议你选择捆绑包(vite或webpack等),使用他们的代理(链接到代理文档)。通常在生产中你会有一个反向代理。如果你决定在服务器端这样做(不安全),那么我建议使用tower_http
有关必须执行此操作的原因,请参见here