So aktivieren Sie CORS in Gulp, Angularjs und Java-Projekt

Question

Ich beginne zu erstellen Angularjs Projekt mit angular starter project und Back-End mit Spring Java. wenn AngularJS Rest Anforderungsruf es zeigen ist folgende Fehler in der Konsole

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-Datei:

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); 

     }); 

Federkerne Filter

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); 
    } 

Wenn ich Probe erstellen proje ct in wamp server senden anfrage 'http://localhost:8085/sample/api/signup' Server wird "CorsFilter init" drucken, aber nicht in Schluck-Server

Answer 1

Ich bin nicht auf Ihr spezifisches Problem zu beantworten. Ich werde Ihnen eine gute Alternative zeigen, die ohne viel Aufhebens funktioniert. Ich hoffe, Sie können es auch nützlich finden.

In meinem Projekt verwende ich angular-cli. angular-cli ist mein Angular-Team gepflegt. Es erstellt eine Skelett-Anwendung mit Karma, Webpack, Winkelmesser bereits vorkonfiguriert.

Mit diesem Setup ist es ein Kinderspiel, Ressourcen auf anderen Domänen aufzurufen. Alles, was Sie tun müssen, ist ein proxy für webpack-dev-server konfigurieren. Kein CORS, kein benutzerdefinierter Code in Ihrer Angular-Anwendung, keine benutzerdefinierte Schluckaufgabe. Nur eine einfache Proxy-Route.

erstellen Winkel Anwendung mit angular-cli

ng new PROJECT_NAME 
cd PROJECT_NAME 

eine Datei namens proxy.conf.json Erstellen neben package.json und fügen

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

öffnen package.json und ändern "start": "ng serve" von

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

zu

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

starten wepback-dev-server mit npm start. Das ist es!

Wenn Sie nicht angular-cli noch webpack verwenden möchten, ignorieren Sie einfach meine Antwort.