能否通过grunt connect发送HTTP请求？Angular请求Spring API跨域报错求助

Hey there, let's tackle your issues one by one!

首先解决跨域错误 #

那个错误提示很明确——浏览器的同源策略阻止了你的请求，因为前端跑在localhost:9002，后端在localhost:8080，端口不同属于不同的源，浏览器默认不允许跨域请求。有两个常用的解决办法：

方法1：在Spring后端配置CORS #

这是最直接的后端层面解决方案：

• 局部配置：在你的REST Controller类或者具体的接口方法上添加@CrossOrigin注解，指定允许的前端源：

  @CrossOrigin(origins = "http://localhost:9002")
  @RestController
  @RequestMapping("/api/v1/user")
  public class UserController {
      // 你的接口方法
  }
  

• 全局配置：如果有很多Controller需要配置CORS，可以写一个全局配置类，统一设置规则：

  @Configuration
  public class CorsConfig implements WebMvcConfigurer {
      @Override
      public void addCorsMappings(CorsRegistry registry) {
          registry.addMapping("/api/**")
                  .allowedOrigins("http://localhost:9002")
                  .allowedMethods("GET", "POST", "PUT", "DELETE")
                  .allowedHeaders("*");
      }
  }
  

方法2：用Grunt Connect配置代理转发 #

这种方法不需要改后端，让Grunt Connect把前端的API请求转发到后端，这样前端请求的是同一端口（9002），就不会触发跨域了：

1. 先安装grunt-connect-proxy插件：

   npm install grunt-connect-proxy --save-dev
   

2. 在你的Gruntfile.js里配置代理和connect任务：

   module.exports = function(grunt) {
       grunt.initConfig({
           connect: {
               options: {
                   port: 9002,
                   hostname: 'localhost'
               },
               proxies: [
                   {
                       context: '/api', // 匹配前端请求的API路径
                       host: 'localhost',
                       port: 8080,
                       https: false,
                       changeOrigin: true
                   }
               ],
               server: {
                   options: {
                       middleware: function(connect, options) {
                           var proxy = require('grunt-connect-proxy/lib/utils').proxyRequest;
                           return [
                               proxy, // 先处理代理请求
                               connect.static(options.base) // 再处理静态文件
                           ];
                       }
                   }
               }
           }
       });
   
       grunt.loadNpmTasks('grunt-contrib-connect');
       grunt.loadNpmTasks('grunt-connect-proxy');
   
       // 注册包含代理的启动任务
       grunt.registerTask('serve', ['configureProxies:server', 'connect:server:keepalive']);
   };
   

3. 之后启动服务用grunt serve，前端的API请求就可以写成/api/v1/user，Grunt会自动转发到localhost:8080/api/v1/user。

关于Grunt Connect发送HTTP请求的疑问 #

Grunt Connect本身是静态文件服务器，主要用来托管前端静态资源（HTML、JS、CSS等）。它本身不能直接发送HTTP请求，但可以通过上面说的grunt-connect-proxy插件来转发前端的请求到后端。如果是想在Grunt任务里主动发送HTTP请求（比如测试后端接口），可以用专门的Grunt插件比如grunt-http，配置任务来发送GET/POST请求。

内容的提问来源于stack exchange，提问作者Paras