react js中的Axios Post出现错误：请求的资源上不存在“访问控制允许来源”标头

Question

我正在尝试在我的Web应用程序中使用响应在后端使用Spring启动来创建登录页面。我正在使用Spring SecurityJDBC身份验证进行登录。我正在尝试将我的JSP页面转换为React。登录在JSP和Spring boo中运行良好。现在我正在尝试使用react创建相同的页面。但是当我使用axios post发布时，我发现错误

CORS 策略已阻止从源“http://localhost:3000”在“http://localhost:8080/onlineshopping/login”处访问 XMLHttpRequest：请求的资源上不存在“访问控制-允许-源”标头。

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

安全配置.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调用并将它们重定向到相应的服务器。

尝试以下操作：

> < li>

安装http代理中间件

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

};

然后运行本地开发服务器

Answer 2

在Spring boot中添加CORS过滤器配置并将内容类型添加到axios中的application/x-WW-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);
});
};

Answer 3

您必须将代理地址添加到package.json文件中，例如:

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

接下来，只需添加localhost后面的所有元素，即。

axios.get("/onlineshopping/login")