Сообщение Axios в ответе js выдает ошибку. На запрашиваемом ресурсе отсутствует заголовок «Access-Control-Allow-Origin».

Question

Я пытаюсь создать страницу входа в систему, используя реакцию в моем веб-приложении с весенней загрузкой в ​​бэкэнде.Я использую Spring Security JDBC Authentication для входа в систему.Я пытаюсь преобразовать мои страницы JSP в React.Логин работает нормально с JSP и весенней загрузкой.Теперь я пытаюсь создать ту же страницу с реагировать.но когда я отправляю сообщение с помощью сообщения axios, я получаю ошибку

Доступ к XMLHttpRequest в «http://localhost:8080/onlineshopping/login' от источника» http://localhost:3000' был заблокирован политикой CORS: Нет 'ДоступЗаголовок -Control-Allow-Origin 'присутствует на запрашиваемом ресурсе.

это axios Post

export const Login = (username, password) => async dispatch => {
console.log(password)
let params = {
  username: username,
  password: password
}

const res = await axios.post("http://localhost:8080/onlineshopping/login", {params});
  dispatch({
    type: Login,
    payload: res.data
  });
};

SecurityConfig.java

@Override
public void configure(AuthenticationManagerBuilder auth) throws Exception {
    auth
        .jdbcAuthentication()
        .usersByUsernameQuery("select email, password, enabled from user_detail where email = ?")
        .authoritiesByUsernameQuery("select email, role from user_detail where email = ?")
        .dataSource(dataSource)
        .passwordEncoder(bCryptPasswordEncoder);
}

Pagecontroller.java

@RestController
@CrossOrigin
public class PageController {

@RequestMapping("/login")
    public Map<String, Object> login(
            @RequestParam(name = "error", required = false) String error,
            @RequestParam(name = "logout", required = false) String logout) {

        Map<String, Object> map = new HashMap<String, Object>();
        System.out.println("Login");
        map.put("title", "Login");
        if (error != null) {
            map.put("message", "Username and Password is invalid!");
        }
        if (logout != null) {
            map.put("logout", "You have logged out successfully!");
        }
        return map; 
    }

}

Скажите, пожалуйста, почему я получаю эту ошибку и как ее исправить.

Answer 1

Вы должны добавить адрес прокси в ваш файл package.json, например ::

    },
  "proxy": "http://localhost:8080",
  "devDependencies": {

Далее вы просто добавляете все, что идет после localhost, т.е.

axios.get("/onlineshopping/login")

Answer 2

После добавления конфигурации фильтра CORS в весенней загрузке и типа контента в application / x-www-form-urlencoded в axios запрос моя проблема решена.

export const addProjectTask = (username,password, history) => async dispatch => {

axios.post('http://localhost:8080/onlineshopping/login', 
  Qs.stringify({
  username: username,
  password: password
  }), {
  headers: { 
  "Content-Type": "application/x-www-form-urlencoded"
}})
.then(function (response) {
  console.log(response);
  history.push("/");  
})
.catch(function (error) {
  console.log(error);
});
};

Answer 3

Вы должны создать прокси для вызовов API.

Здесь прокси использует шаблон url для сопоставления с вызовами API и перенаправления их на соответствующий сервер.

Попробуйте следующее:

• Установить http-proxy-middleware

  npm install http-proxy-middleware --save
  

• create src / setupProxy.js

  const proxy = require('http-proxy-middleware');
  
  module.exports = function(app) {
  
     app.use(proxy('/api', { target: 'http://localhost:8080/' }));
  
  };
  

• Затем запустите ваш локальный сервер разработки