Question

我有一个基于角度和后端的前端Web应用程序作为弹簧支撑API。我正在使用grunt connect来为前端服务，而其余的api在localhst:8080上运行，grunt服务器在localhost:9002上运行。所以从角度来看，当我使用angular-resource向后端服务器发送http调用时，我收到以下错误：

Failed to load localhost:8080/api/v1/user: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https

angular.js:14800 Possibly unhandled rejection: {"data":null,"status":-1,"config":{"method":"POST","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback","url":"localhost:8080/api/v1/user","data":{"user":{"email":"a","password":"a"}},"headers":{"Accept":"application/json, text/plain, */*","Content-Type":"application/json;charset=utf-8"}},"statusText":"","xhrStatus":"error","resource":{"user":"..."}}

JS文件：

angular.module('userModule').factory('userService',function($resource){
  var dataResource = $resource('user',{},
    {

      saveUser :{
        method: 'POST',
        url:'localhost:8080/api/v1/user',
        params : '@user'  
      },

    });
    return dataResource;

});

Gruntfile

'use strict';

module.exports = function (grunt) {
  var proxySnippet = require('grunt-connect-proxy/lib/utils').proxyRequest;

  // Load grunt tasks automatically
  require('load-grunt-tasks')(grunt);

  // Time how long tasks take. Can help when optimizing build times
  require('time-grunt')(grunt);

  var serveStatic = require('serve-static');

  // Define the configuration for all the tasks
  grunt.initConfig({

    pkg: grunt.file.readJSON('package.json'),

    clean: ["dist"],

    htmlmin: {                                     // Task
      dist: {                                      // Target
        options: {                                 // Target options
          removeComments: true,
          collapseWhitespace: true
        },
        files: {                                   // Dictionary of files
          'dist/index.html': 'dist/index.html'     // 'destination': 'source'
        }
      }
    },

    copy: {
      main: {
        expand: true,
        cwd: '.',
        src: ['**', /* '!js/**', '!lib/**', */ '!**/*.css', '!node_modules/**', '!Gruntfile.js', '!package.json', '!package-lock.json'],
        dest: 'dist/'
      },
      fonts: {
        expand: true,
        cwd: 'lib/fonts',
        src: ['**'],
        dest: 'dist/fonts'
      }
    },

    rev: {
      files: {
        src: ['dist/**/*.{js,css}', '!dist/lib/**/*.{js,css}', '!dist/js/services/**/*.{js,css}']
      }
    },

    useminPrepare: {
      html: 'index.html'
    },

    usemin: {
      html: ['dist/index.html']
    },

    uglify: {
      options: {
        report: 'min',
        mangle: false
      }
    },

    // Watches files for changes and runs tasks based on the changed files
    watch: {
      js: {
        files: ['js/*.js'],
        options: {
          livereload: '<%= connect.options.livereload %>'
        }
      },
      styles: {
        files: ['css/*.css']
      },
      gruntfile: {
        files: ['Gruntfile.js']
      },
      livereload: {
        options: {
          livereload: '<%= connect.options.livereload %>'
        },
        files: [
          '*.html',
          'css/*.css',
          'images/*.{png,jpg,jpeg,gif,webp,svg}'
        ]
      }
    },

    // The actual grunt server settings
    connect: {
      options: {
        port: 9002,
        // Change this to '0.0.0.0' to access the server from outside.
        hostname: '0.0.0.0',
        livereload: 35730,
        base: '.',
        middleware: function (connect, options, middlewares) {
            middlewares.unshift(function (req, res, next) {
                res.setHeader('Access-Control-Allow-Origin', '*');
                res.setHeader('Access-Control-Allow-Methods', '*');
                return next();

            });

            return middlewares;
        }

      },

      proxies: [
        {
          context: '/api/v1',
          host: 'localhost',
          port: 8080,
          changeOrigin: true
        }
      ],
      livereload: {
        options: {
          open: false,
          middleware: function (connect) {
            return [
              proxySnippet,
              serveStatic('.')
            ];
          }
        }
      }
    },
  });

  grunt.registerTask('serve', 'Compile then start a connect web server', function (target) {
    grunt.task.run([
      'configureProxies',
      'connect:livereload',
      'watch'
    ]);
  });

  grunt.registerTask('default', [
    'clean', 'copy', 'useminPrepare', 'concat', 'uglify', 'cssmin', 'rev', 'usemin', 'htmlmin'
  ]);

};

有人可以告诉我是否可以使用grunt connect发送http调用？

Answer 1

您遇到了CORS问题，当您向其他域或架构http https或其他端口发出请求时，会发生这种情况（您的情况属于此情况）。有两种选择。

在后端服务器上允许CORS（在您的情况下为弹簧支持的服务器）。

@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
        // by default uses a Bean by the name of corsConfigurationSource
        .cors().and()
        ...
    }

    @Bean
    CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration configuration = new CorsConfiguration();
        configuration.setAllowedOrigins(Arrays.asList("http://localhost:8080"));
        configuration.setAllowedMethods(Arrays.asList("GET","POST"));
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);
        return source;
    }
}

可以找到更多信息here。

在apache，nginx等同一个完整的HTTP服务器中配置前端和后端，并设置请求处理，如下所示。

<强>一个即可。在默认路径上提供所有静态/角度资源。（localhost/）
的 B'/ strong>即可。将您的所有后端请求发送至localhost/api/并将其代理到您的后端localhost:8080/api应用程序。

Nginx示例：

server { listen 80; # The host name to respond to server_name localhost; location /api/ { # Backend nodejs server proxy_pass http://localhost:8080/api; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection $connection_upgrade; } location / { root /angular directory path/; } }

是否可以通过grunt connect发送http调用？

1 个答案: