CORS actix-web 访问 XMLHttpRequest 已被 CORS 策略阻止

Question

我有一个 actix-web 后端和一个 React 前端。我开始收到这个 cors 错误。最初很容易通过添加来解决

       let cors = Cors::default()
           .allowed_origin("http://localhost:3000")
           .allowed_origin("http://10.0.0.77:3000")
           .allowed_methods(vec!["GET", "POST", "PUT", "DELETE"])
           .allowed_headers(vec![header::AUTHORIZATION, header::ACCEPT])
           .allowed_header(header::CONTENT_TYPE)
           .max_age(3600);
          ...
          ...
          .wrap(cors)

但是错误又开始发生。

它允许我将请求发送到我的登录路由，但不能发送到我的其他路由。

我尝试了网上看到的其他解决方案，例如：添加

.wrap(Cors::permissive()) 

但是并没有改变什么，就好像根本没有影响一样。

我的主要（）

#[actix_web::main]
async fn main() -> std::io::Result<()> {
   dotenv().ok();
   std::env::set_var("RUST_LOG", "actix_web=info");
   env_logger::init();
   
   let pool: Pool<Postgres> = PgPoolOptions::new()
       .max_connections(5)
       .connect(&std::env::var("LOCAL_DATABASE_URL").expect("DATABASE_URL must be set"))
       .await
       .expect("Error building a connection pool");

       HttpServer::new(move || {
           App::new()
           .wrap(Cors::permissive())
               .app_data(Data::new(AppState{db:pool.clone()}))
               .wrap(Logger::default())
               .wrap(AuthMiddleware)
               .route("/signup", web::post().to(signup))
               .route("/login", web::post().to(login))
               .route("/recruit", web::post().to(recruit))
               .route("/get_recruiter", web::post().to(recruiter))
   })
   .bind("127.0.0.1:8080")?
   .workers(10)
   .run()
   .await
}

反应代码

  useEffect(() => {
    const fetchRecruiterData = async () => {
      const token = localStorage.getItem('authToken');
      if (!token || !user) return;

      try {
        const response = await axios.post('http://127.0.0.1:8080/get_recruiter',
          {filter: "id", value: user.reporter_id},
          {headers: {Authorization: `${token}`}}
        );
        setRecruiterData(response.data);
      } catch (error) {
        console.error('Error fetching recruiter data:', error);
      }
    };

    fetchRecruiterData();
  }, [user]);

我收到此错误

Access to XMLHttpRequest at 'http://127.0.0.1:8080/get_recruiter' 
from origin 'http://10.0.0.77:3000' has been blocked by CORS policy:
Response to preflight request doesn't pass access control check:
No 'Access-Control-Allow-Origin' header is present on the requested resource.

我在网上看到的解决方案都没有解决它，我不知道出了什么问题，特别是为什么 Cors::permissive() 似乎不起作用。

你知道它会是什么吗？

Answer 1

大多数 Rust 框架按照与注册中间件相反的顺序处理中间件。对于 actix 也是如此。

这意味着您的 Auth 和 Logger 中间件将首先尝试处理请求，然后 CORS 层可以使用适当的响应来处理 CORS 请求。首先处理 Logger 应该不是问题，因为它不会处理请求。但我怀疑您的 Auth 中间件可能会尝试响应请求，因此无法正确处理 CORS 请求。

所以只需在Auth层之后注册CORS层即可：

App::new()
    .app_data(Data::new(AppState{db:pool.clone()}))
    .wrap(AuthMiddleware)
    .wrap(Cors::permissive())
    .wrap(Logger::default())
    .route("/signup", web::post().to(signup))
    .route("/login", web::post().to(login))
    .route("/recruit", web::post().to(recruit))
    .route("/get_recruiter", web::post().to(recruiter))