浏览器中的 Grunt Connect CORS 错误

Question

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

我花了一个上午的时间完成了差不多 post 我可以在网上找到，但我仍然无法正常工作，我现在可以让我的页面为我提供服务，因为一些例子甚至阻止了它的工作.我确实在 grunt 服务器正在写入的 cmd window 中看到控制台日志记录，但无论我尝试了什么，我都会不断收到 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;
                    }                                    
               }        
            } 
        }

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

Answer 1

好的，看起来上面的 g运行t 配置确实有效。我必须在 spring 中进行一些修改才能使其正常工作。

我以前从来没有这样做过，因为通常对后端 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 测试时，我将能够启动 g运行t 服务器并将 angular 应用程序部署到该服务器，并且仍然运行我在自动构建过程中进行的所有集成测试。

浏览器中的 Grunt Connect CORS 错误

Grunt Connect CORS errors in browser

cors

grunt-contrib-connect