問題描述

我正在嘗試 jhipster 使用基于令牌的身份驗(yàn)證.效果很好.

I'm trying jhipster with token-based authentication. It works perfectly.

現(xiàn)在，我想在不同的域上運(yùn)行后端和前端代碼.我該怎么做?

這是我嘗試過的:

1. 運(yùn)行 yo jhipster 并選擇基于令牌的身份驗(yàn)證選項(xiàng):

1. Run yo jhipster and select token-based authentication option:

Welcome to the JHipster Generator

? (1/13) What is the base name of your application? jhipster
? (2/13) What is your default Java package name? com.mycompany.myapp
? (3/13) Do you want to use Java 8? Yes (use Java 8)
? (4/13) Which *type* of authentication would you like to use? Token-based authentication (stateless, with a token)
? (5/13) Which *type* of database would you like to use? SQL (H2, MySQL, PostgreSQL)
? (6/13) Which *production* database would you like to use? MySQL
? (7/13) Which *development* database would you like to use? H2 in-memory with Web console
? (8/13) Do you want to use Hibernate 2nd level cache? Yes, with ehcache (local cache, for a single node)
? (9/13) Do you want to use clustered HTTP sessions? No
? (10/13) Do you want to use WebSockets? No
? (11/13) Would you like to use Maven or Gradle for building the backend? Maven (recommended)
? (12/13) Would you like to use Grunt or Gulp.js for building the frontend? Grunt (recommended)
? (13/13) Would you like to use the Compass CSS Authoring Framework? No

...

I'm all done. Running bower install & npm install for you
^C

rm -rf backend/.bowerrc
rm -rf backend/.jshintrc
rm -rf backend/bower.json
rm -rf backend/Gruntfile.js
rm -rf backend/package.json
rm -rf backend/src/main/webapp
rm -rf backend/src/test/javascript

rm -rf frontend/pom.xml
rm -rf frontend/src/main/java
rm -rf frontend/src/main/resources
rm -rf frontend/src/test/gatling
rm -rf frontend/src/test/java
rm -rf frontend/src/test/resources

...
var parseVersionFromPomXml = function() {
    return '1.2.2.RELEASE';
};
...
browserSync: { ..., proxy: "localhost:8081" }

angular.module('jhipsterApp', [...])
.constant('API_URL', 'http://localhost:8080/')
.run( ... )

angular.module('jhipsterApp').factory(..., API_URL) {
    return $http.post(API_URL + 'api/authenticate', ...);
}

angular.module('jhipsterApp').factory('Account', function Account($resource, API_URL) {
    return $resource(API_URL + 'api/account', {}, {...});
}

// Make similar changes in all service files.

// Copied from here: https://spring.io/guides/gs/rest-service-cors/

@Component
public class SimpleCORSFilter implements Filter {
    public void doFilter(...) {
        ...
        response.setHeader("Access-Control-Allow-Origin", "*");
        ...
    }
}

運(yùn)行

• 終端標(biāo)簽 #1:BACKEND

cd backend
mvn spring-boot:run

...
[INFO] com.mycompany.myapp.Application - Started Application in 11.529 seconds (JVM running for 12.079)
[INFO] com.mycompany.myapp.Application - Access URLs:
----------------------------------------------------------
        Local:          http://127.0.0.1:8080
        External:       http://192.168.56.1:8080
----------------------------------------------------------

cd frontend/src/main/webapp
npm install -g http-server
http-server

Starting up http-server, serving ./ on: http://0.0.0.0:8081
Hit CTRL-C to stop the server

cd frontend
bower install
npm install
grunt serve

...
[BS] Proxying: http://localhost:8081
[BS] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://10.34.16.128:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://10.34.16.128:3001
 -------------------------------------

瀏覽http://localhost:3000/#/login

輸入 username:password as admin:admin

我們的 BACKEND 標(biāo)簽顯示:

[DEBUG] com.mycompany.myapp.security.Http401UnauthorizedEntryPoint - Pre-authenticated entry point called. Rejecting access

<小時(shí)>

顯然，我做錯(cuò)了什么.這是什么?

Apparently, I'm doing something wrong. What is it?

推薦答案

當(dāng)請求由于 CORS 失敗時(shí)，后端沒有可見的錯(cuò)誤.HTTP 請求實(shí)際上成功了，但是在前端被 javascript 阻止了.JS 控制臺(tái)中會(huì)出現(xiàn)類似這樣的消息.

When requests fail due to CORS, there is no visible error on the backend. The HTTP request actually succeeds, but is blocked on the front-end side by javascript. A message like this one will appear in the JS console.

XMLHttpRequest cannot load http://localhost:8080/api/authenticate. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access.

您看到的錯(cuò)誤消息實(shí)際上與身份驗(yàn)證有關(guān).當(dāng)您啟用 CORS 時(shí)，您的 JS 將使用 HTTP OPTIONS 方法發(fā)送飛行前"請求.JHipster 未配置為全局允許 OPTIONS 方法.在做同樣的事情時(shí)，我自己也遇到了同樣的問題.修復(fù)非常簡單:只需將這一行添加到您的 com.mycompany.config.SecurityConfiguration 之前(之前)第一個(gè) antMatchers 條目.

The error message you're seeing is actually related to authentication. When you enable CORS, your JS will send ''pre-flight'' requests using the HTTP OPTIONS method. JHipster isn't configured to allow the OPTIONS method globally. I ran into this exact same problem myself while doing the same thing you did. The fix is very simple: just add this line to your com.mycompany.config.SecurityConfiguration immediately preceding (before) the first antMatchers entry.

.antMatchers(org.springframework.http.HttpMethod.OPTIONS, "/api/**").permitAll()

這將明確允許使用 OPTIONS 方法的所有請求.OPTIONS 方法在 CORS 中用作讀取所有標(biāo)頭并查看 CORS 請求中允許使用哪些 HTTP 方法的一種方式.

This will explicitly allow all requests with the OPTIONS method. The OPTIONS method is used in CORS as a way to read all of the headers and see what HTTP methods are allowed in the CORS request.

最后，在您的 SimpleCORSFilter 類中，您還應(yīng)該添加這些標(biāo)題:

Finally, in your SimpleCORSFilter class, you should also add these headers:

response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "86400"); // 24 Hours
response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, x-auth-token");

這篇關(guān)于將 jhipster 后端和前端分成兩個(gè)項(xiàng)目?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！