如何在 Angular 6 的生产级应用程序中处理跨域资源共享？

Posted 2023-02-27

【中文标题】如何在 Angular 6 的生产级应用程序中处理跨域资源共享？

【英文标题】：How to handle Cross-Origin Resource Sharing in a production level appliaction of angular 6?

【发布时间】：2018-12-07 01:39:10

【问题描述】：

我知道我可以通过修改服务器以添加标头 Access-Control-Allow-Origin 来允许任何请求到达服务器。但在生产水平上这样做是否安全。还是有其他安全的方法可以做到这一点？

【问题讨论】：

CORS 可以通过允许来自白名单域的请求在服务器端进行处理。顺便问一下，您使用的是哪个后端？

我正在使用弹簧靴。

你可以查看spring boot的答案

好的，谢谢！ :-)

【参考方案1】：

解释 CORS。

对于每个 XHR(XMLHttpRequest) 请求，浏览器都会向服务器发送一个带有适当标头的飞行前请求，以检查服务器是否允许实际请求。如果您不添加任何处理程序，那么它将在浏览器上引发异常。

要在 Spring boot 中处理这个问题，您可以在 Controller 方法或类上添加以下注释（使其成为全局）来处理请求：-

     @CrossOrigin(
        origins =  "*" ,     // You can add your allowed origins here
        methods =  RequestMethod.GET ,   // Request Method
        allowCredentials = "true",
        allowedHeaders = CorsConfiguration.ALL,   // Allowed Headers
        exposedHeaders = )    
    @RequestMapping(method = RequestMethod.POST)
    public String greeting(@RequestBody SomeClass
     name) 
        // your own code
    

您也可以查看this以供参考

【参考方案2】：

通常，您只需将允许的主机列入白名单，如果您使用的是express，则可以是以下代码。

const cors = require('cors');

const whitelist = [
  'https://myfrontserver1.com',
  'https://myfrontserver2.com',
  'https://myfrontserver3.com',
]; // the white list could be extracted from database, or a config file is up to you

app.use(cors( origin: whitelist, credentials: true ));

【讨论】：

它在 expressjs 中工作。谢谢！。你知道这在 Spring Boot 中是如何工作的吗？

不是java开发者抱歉:(

@LasithaNarangoda 这个答案并不能解决春季启动的实际问题。因此，这不应该是问题的例外答案。