当前位置: 首页 > 面试题库 >

Angular2 / Spring Boot允许在PUT上进行交叉原点

吴炎彬
2023-03-14
问题内容

我的Web应用程序上有一个小问题:一个与spring boot API连接的angular2应用程序。

我无法从angular2应用访问我的请求。我收到此错误:

Failed to load http://localhost:8080/deliveryMan/: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.

Java代码:

@RestController
@RequestMapping(value = "/deliveryMan")
@CrossOrigin
public class DeliveryManController {

    @Autowired
    DeliveryManService deliveryManService;

    @RequestMapping(value = "/getAllDeliveryMan", method = RequestMethod.GET)
    public Iterable<DeliveryMan> getAllDeliveryMan(){
        return deliveryManService.findAll();
    }

    @RequestMapping(method = RequestMethod.PUT, consumes = "application/json")
    public DeliveryMan addDeliveryMan(@RequestBody DeliveryMan deliveryMan) throws InvalidObjectException {
        deliveryManService.save(deliveryMan);
        return deliveryMan;
    }

@SpringBootApplication
@EnableAutoConfiguration
@ComponentScan
public class MyApp{

    public static void main(String[] args) {
        SpringApplication.run(MyApp.class, args);
    }
}

angular2代码:

private apiUrl = 'http://localhost:8080/deliveryMan/';

getAll(): Promise<DeliveryMan[]> {
  const url = this.apiUrl + 'getAllDeliveryMan';
  return this.http.get(url)
    .toPromise()
    .then(response => response.json().data as DeliveryMan[])
    .catch(this.handleError);
}

saveDeliveryMan(deliveryMan: DeliveryMan): Promise<DeliveryMan> {
  const url = this.apiUrl;
  return this.http.put(url, JSON.stringify(deliveryMan), this.headers)
    .toPromise()
    .then(() => deliveryMan)
    .catch(this.handleError);
}

为了解决该问题,我在控制器类中添加了@CrossOrigin。它解决了getAll方法的问题,但没有解决其他方法的问题。

如何解决它,以便我可以使用PUT方法而不会出现此错误?


问题答案:

CORSFilter.java在你的项目中创建文件。

@Component
@Order(Ordered.HIGHEST_PRECEDENCE)
public class CORSFilter implements Filter {

    /**
     * CORS filter for http-request and response
     */
    public CORSFilter() {
    }

    /**
     * Do Filter on every http-request.
     */
    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest request = (HttpServletRequest) req;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "access_token, authorization, content-type");

        if ("OPTIONS".equalsIgnoreCase(request.getMethod())) {
            response.setStatus(HttpServletResponse.SC_OK);
        } else {
            chain.doFilter(req, res);
        }
    }

    /**
     * Destroy method
     */
    @Override
    public void destroy() {
    }


 类似资料:
  • 我的web应用程序有一个小问题:一个连接到Spring BootAPI的angular2应用程序。 如何解决它,这样我就可以使用PUT方法而不会得到这个错误?

  • Backend-URL=http://localhost:8080 Frontend-URL=http://localhost:8081 在main.js文件中,我为Axios添加了以下默认值: 在后端站点上,我添加了以下条目:

  • 问题内容: 我跑了 运行该命令后,当尝试在Windows OS上运行任何npm命令时,我不断收到以下内容。 已从删除所有文件 它不起作用。 有什么建议吗? 问题答案: 运行此命令是我的错误。 npm config设置前缀/ usr / local 路径不适用于Windows。此命令在以下位置更改了前缀变量 要访问此目录并对其进行更改,我需要以管理员身份运行cmd。 所以我做了: 以管理员身份运行c

  • 我跑 在运行该命令之后,当尝试在Windows操作系统上运行任何npm命令时,我不断得到以下信息。 已从中删除所有文件 它没有工作。 有什么建议吗?

  • 谁说可信赖的 API 必须通过 HTTP 补丁单独支持部分更新? 它似乎没有任何好处。它增加了在服务器端实现的更多工作,以及在客户端实现的更多逻辑,以决定请求哪种更新。 我是在使用HTTP创建一个RESTAPI的上下文中问这个问题的,这个RESTAPI提供了对已知数据模型的抽象。要求PATCH进行部分更新,而不是要求PUT进行全部或部分更新,这似乎没有任何好处,但我可以被说服。 相关的 http:

  • 我的网页(wp1)有一个iframe。iframe的来源是另一个网页(wp2)。我在wp1上有一些javascript函数,试图操纵wp2的内容。然而,浏览器会让“阻止原点为空的帧”访问跨原点帧我怎么才能绕过这个?