时间戳

首页 > 解决方案 > CORS 问题：从 DockerHub 拉取 Spring/MySQL 后端用于前端开发

java - CORS 问题：从 DockerHub 拉取 Spring/MySQL 后端用于前端开发

问题描述

我已将 java/mysql 后端应用程序推送到我的私人 dockerhub。我想对此进行沙箱化，以便多个用户可以访问，并对这个应用程序进行 API 调用，因为我们想在 React 中进行一些前端浏览器开发。使用像 Postman 这样的 REST 客户端很好，但是当我们开始使用浏览器时，我们开始遇到 CORS 问题：

Access to fetch at 'http://127.0.0.1:8080/simulations/1/ratings/1' from origin 'http://localhost: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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

我的docker-compose.yml文件如下：

version: '3'
services:
  footysim-db:
    restart: always
    container_name: footysim-db
    image: 'mysql:5.7.30'
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: football_simulation
      MYSQL_USER: user
      MYSQL_PASSWORD: password
    ports:
      - '3308:3306'
    volumes:
      - './initial.sql:/docker-entrypoint-initdb.d/initial.sql'
  footysim-server:
    restart: always
    image: 'DOCKERHUB:PROJECT'
    expose:
      - '8080'
    ports:
      - '8080:8080'
    environment:
      SPRING_DATASOURCE_URL: jdbc:mysql://footysim-db:3306/football_simulation?useSSL=false&allowPublicKeyRetrieval=true
      SPRING_DATASOURCE_USERNAME: user
      SPRING_DATASOURCE_PASSWORD: password
    depends_on:
      - footysim-db

在我application-properties的 Spring Boot 中：

project.cors.allowedOrigins=http://$server_ip:3000, http://127.0.0.1:3000

我是否对配置做错了什么？

标签： javareactjsspringdockerdocker-compose

解决方案

我过去也遇到过类似的问题。虽然它与 docker 无关。作为允许 CORS 功能的解决方法，我添加了一个自定义过滤器，在其中我定义了一个特定的 API 路径以允许使用 CORS 标头。

下面的代码片段：

public class CorsFilter implements Filter {

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
            throws IOException, ServletException {
        String path = ((HttpServletRequest) req).getServletPath();
        if(path.contains("abcd- api path after contextPath ")||path.contains("abcd- api path after contextPath  ")) {
            HttpServletResponse response = (HttpServletResponse) res;
            HttpServletRequest request = (HttpServletRequest) req;
            response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
            response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE");
            response.setHeader("Access-Control-Max-Age", "3600");
            response.setHeader("Access-Control-Allow-Credentials", "true");
            response.setHeader("Access-Control-Allow-Headers", "*");
        }
        chain.doFilter(req, res);
    }

    @Override
    public void init(FilterConfig filterConfig) {}

    @Override
    public void destroy() {}
}

推荐阅读