簡體   English   中英

從源 'http://localhost:3000' 在 'http://localhost:8080/home/data' 訪問 XMLHttpRequest

[英]Access to XMLHttpRequest at 'http://localhost:8080/home/data' from origin 'http://localhost:3000'

好吧,我有一個帶有安全性的 Spring 引導應用程序的后端。 這是安全配置的樣子:

 @Override
protected void configure(HttpSecurity http) throws Exception {

    http.cors()
            .and()
            .authorizeRequests()
            .antMatchers("/home/**")
            .authenticated()
            .and()
            .formLogin()
    .defaultSuccessUrl("/home")
            .and()
            .logout()
            .logoutRequestMatcher(new AntPathRequestMatcher("/logout"))
            .logoutSuccessUrl("/login")
            .invalidateHttpSession(true)        // set invalidation state when logout
            .deleteCookies("JSESSIONID");

對於前端,我有一個 React.js 應用程序。 如果您在此應用程序上按下按鈕,則應執行對此 url 的 GET 請求: 'http://localhost:8080/home/hives

這是我在 React.js 中的代碼 getDataAxios(){

     axios.get('http://localhost:8080/home/data', {
        mode: "no-cors",
        auth: {
            username: 'user.user@provider.io',
            password: 'password'
          }
      })
      .then(function (response) {
        console.log(response);
      })
}

問題是,當按下執行此 function 的按鈕時,我在瀏覽器控制台上收到此異常:

Access to XMLHttpRequest at 'http://localhost:8080/home/data' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

好吧,我有一個帶有安全性的 Spring 引導應用程序的后端。 這是安全配置的樣子:

 @Override
protected void configure(HttpSecurity http) throws Exception {

    http.cors()
            .and()
            .authorizeRequests()
            .antMatchers("/home/**")
            .authenticated()
            .and()
            .formLogin()
    .defaultSuccessUrl("/home")
            .and()
            .logout()
            .logoutRequestMatcher(new AntPathRequestMatcher("/logout"))
            .logoutSuccessUrl("/login")
            .invalidateHttpSession(true)        // set invalidation state when logout
            .deleteCookies("JSESSIONID");

對於前端,我有一個 React.js 應用程序。 如果您在此應用程序上按下按鈕,則應執行對此 url 的 GET 請求: 'http://localhost:8080/home/hives

這是我在 React.js 中的代碼 getDataAxios(){

     axios.get('http://localhost:8080/home/data', {
        mode: "no-cors",
        auth: {
            username: 'user.user@provider.io',
            password: 'password'
          }
      })
      .then(function (response) {
        console.log(response);
      })
}

問題是,當按下執行此 function 的按鈕時,我在瀏覽器控制台上收到此異常:

Access to XMLHttpRequest at 'http://localhost:8080/home/data' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM