http跨域问题解决方案

时间:2024-03-16 12:11:23

    说说我出现跨域的场景:在做前后端分离的项目,前端使用9000端口访问,但是请求后端的端口是8080,于是请求之后可以接受到json数据,但是前端出现错误Access to XMLHttpRequest at 'http://localhost:8080/web/admin/commodityManager/lisCommodityBySkuOr' from origin 'http://localhost:9000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.如下图

http跨域问题解决方案

于是乎明百这是跨域问题,就去学习了相关知识,现总结如下:

  1. CORS(跨域): 常被大家称之为跨越问题,准确的叫法是跨域资源共享(CORS,Cross-origin resource sharing),是W3C标准,是一种机制,它使用额外的HTTP头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。
  2. 什么叫跨域?
  • 请求协议http,https的不同
  • 域domain的不同
  • 端口port的不同

     3.跨域如何解决?

  • 通过使用Spring注解CrossOrigin即可解决跨域问题,在需要跨域方法或者controller上使用该注解,如下图:

http跨域问题解决方案

  • 使用全局配置,通过mvc的拦截器,设置响应头的 Access-Control-Allow-Origin为* 即可,如下图

http跨域问题解决方案

其中,Access-Control-Allow-Origin为*表示允许任何域的请求访问;可以看下区别

http跨域问题解决方案

http跨域问题解决方案