浏览器中的 Grunt Connect CORS 错误答案

【问题标题】：Grunt Connect CORS errors in browser浏览器中的 Grunt Connect CORS 错误
【发布时间】：2016-07-28 02:32:03
【问题描述】：

我正在尝试将一个小型 Angular 应用程序连接到我在 spring 中编写的 rest web 服务。我的 tomcat 服务器在 localhost:8080 上运行，而我的 grunt 服务器在 localhost:11000 上运行。这会导致控制台出现 CORS 错误，我无法从浏览器向其余 API 发出请求。

我整个上午都在浏览几乎可以在网上找到的帖子，但我仍然无法正常工作，我现在可以将我的页面提供给我，因为一些示例甚至阻止了它的工作。我确实在 grunt 服务器正在写入的 cmd 窗口中看到控制台日志记录，但无论我尝试了什么，我都会不断收到 CORS 错误：

  connect: {
            livereload: {
                options: {
                  port: 11000,
                  hostname: 'localhost',
                  open: false,                                     
                  middleware: function(connect, options, middlewares) {                       
                        middlewares.unshift(function(req, res, next) {
                            console.log('***** ADDING HEADERS *****');
                            res.setHeader('Access-Control-Allow-Origin', '*');
                            res.setHeader('Access-Control-Allow-Credentials', true);
                            res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
                            res.setHeader('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
                            next();
                        });

                        return middlewares;
                    }                                    
               }        
            } 
        }

有人能告诉我如何解决这个问题吗？

【问题讨论】：

标签： cors grunt-contrib-connect

【解决方案1】：

好的，看起来上面的 grunt 配置确实有效。我不得不在春天做一些修改才能让它发挥作用。

我以前从来没有这样做过，因为通常后端 API 的请求是从 java 发送的，前端应用程序也是用 java 编写的，请求来自浏览器 >> tomcat\spring\java 然后如果此应用需要对后端进行休息调用，然后从 java 启动它，这不会导致这些问题。

无论如何，这里是任何人在尝试直接从在不同容器中运行的 Angular 应用程序调用用 Spring 编写的 Rest API 时可能遇到此问题的修复示例。

在您的配置类中配置以下内容：

@Bean
public WebMvcConfigurer corsConfigurer() {
    return new WebMvcConfigurerAdapter() {
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/calculator/*").allowedOrigins("http://localhost:11000");
        }
    };
}

这也仅用于开发，不想部署到 apache 网络服务器，因为我可以使用 http 代理很容易地解决这个问题，这样做意味着当我运行我的 selenium 测试时，我将能够启动 grunt 服务器并将 Angular 应用程序部署到该应用程序，并且在我的自动构建过程中仍然运行我所有的集成测试。

【讨论】：