Question

我开始使用创建Angularjs项目 angular starter project，以及使用spring java的后端。当Angularjs呼叫休息请求时，它在控制台

中显示以下错误

 XMLHttpRequest cannot load http://localhost:8085/sample/api/signup. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:5000' is therefore not allowed access. The response had HTTP status code 404.

Gulp文件：

gulp.task('server', function() {
    connect.server({
        root: filePath.build.dest,
        fallback: filePath.build.dest + '/index.html',
        port: 5000,
        livereload: true

            ,
            middleware: function(connect, o) {
                return [ (function() {
                    var url = require('url');
                    var proxy = require('proxy-middleware');
                    var options = url.parse('http://localhost:8085/sample'); // path to your dev API
                    options.route = '/api';
                    return proxy(options);
                })() ];
            }
    });
});

Angularjs

    var data = JSON.stringify({
      'name':'jiji',
      'lastName':'k',
      'email':'test@gmail.com',
      'password':'1234',

     });



   var config = {
        headers: {
            'Access-Control-Allow-Origin': '*',
            'contentType': 'application/json',
            'Accept': 'application/json'
        }
    }

    $http.post('http://localhost:8085/sample/api/signup', data, config)
        .success(function(data, status, headers, config) {
             return (data);

        })
        .error(function(data, status, header, config) {

            return (data);

        });

Spring Cores过滤器

public class CorsFilter implements Filter {



    public CorsFilter() {
       System.out.println("CorsFilter  init");
    }

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        System.out.println("SimpleCORSFilter init 2");
        HttpServletRequest request = (HttpServletRequest) req;
        HttpServletResponse response = (HttpServletResponse) res;

        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "Content-Type, Accept, X-Requested-With, remember-me");

        chain.doFilter(req, res);
    }

当我在wamp服务器中创建示例项目时，发送请求＆＃39; http://localhost:8085/sample/api/signup＆＃39;服务器将打印＆＃34; CorsFilter init＆＃34;但不能在gulp服务器上工作

Answer 1

我没有回答你的具体问题。我会告诉你一个很好的选择，没有任何大惊小怪。我希望你也觉得它也很有用。

在我的项目中，我正在使用angular-cli。我是Angular团队的angular-cli。它创建了一个骨架应用程序，其中已经预先配置了karma，webpack和量角器。

使用此设置，调用其他域上的资源是没有意义的。您所要做的就是为webpack-dev-server配置proxy。没有CORS，Angular应用程序中没有自定义代码，也没有自定义gulp任务。只是一个简单的代理路线。

使用angular-cli

创建一个角度应用程序

ng new PROJECT_NAME
cd PROJECT_NAME

在proxy.conf.json旁边创建一个名为package.json的文件，然后添加

{
  "/sample": {
    "target": "http://localhost:8085",
    "secure": false
  }
}

打开package.json并从

更改"start": "ng serve"

"scripts": {
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor"
},

到

"scripts": {
    "start": "ng serve --proxy-config proxy.conf.json",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor"
},

使用wepback-dev-server开始npm start。就是这样！

如果您不想使用angular-cli或webpack，请忽略我的回答。

如何在Gulp，Angularjs和java项目中启用CORS

1 个答案: