reactjs 为什么从rust后端请求数据时出现CORS错误?

egdjgwm8  于 2023-03-01  发布在  React
关注(0)|答案(2)|浏览(193)

对于一个项目,我使用了一个带有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;
nbnkbykc

nbnkbykc1#

尝试allow_headers“内容类型”

use http::header::{CONTENT_TYPE};

let cors = CorsLayer::new()
   .allow_methods([Method::GET, Method::POST])
   .allow_origin(Any)
   .allow_headers([CONTENT_TYPE]);
zbwhf8kr

zbwhf8kr2#

如果你想这样做的话,Cors需要在服务器端进行调整。我建议你选择捆绑包(vite或webpack等),使用他们的代理(链接到代理文档)。通常在生产中你会有一个反向代理。如果你决定在服务器端这样做(不安全),那么我建议使用tower_http
有关必须执行此操作的原因,请参见here

相关问题