Question

我正在尝试使用后端的spring boot在我的Web应用程序中使用react来创建Login页面。我正在使用Spring Security JDBC身份验证进行登录。我正在尝试将我的JSP页面转换为React。使用JSP和spring boot，登录正常。现在，我试图用react创建同一页面。但是当我使用axios发布时，我遇到错误

从源“ http://localhost:8080/onlineshopping/login”到“ http://localhost:3000”处对XMLHttpRequest的访问已被CORS策略阻止：所请求的资源上没有“ Access-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

您必须为API调用创建代理。

在这里，代理使用url模式来匹配api调用，并将它们重定向到相应的服务器。

尝试以下操作：

安装http-proxy-middleware

npm install http-proxy-middleware --save

创建src / setupProxy.js

const proxy = require('http-proxy-middleware');

module.exports = function(app) {

   app.use(proxy('/api', { target: 'http://localhost:8080/' }));

};

然后运行您的本地Dev服务器

Answer 2

您必须将proxy地址添加到package.json文件，例如：

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

接下来，您只需添加所有位于localhost之后的内容，即

axios.get("/onlineshopping/login")

Answer 3

在Spring Boot中将CORS过滤器配置和内容类型添加到axios中的application / x-www-form-urlencoded后，我的问题已解决。

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

react js中的Axios Post给出错误消息请求的资源上没有“ Access-Control-Allow-Origin”标头

3 个答案: