前后端衔接跨域问题解决方案

最新推荐文章于 2024-06-04 14:49:50 发布

qq_41416539

最新推荐文章于 2024-06-04 14:49:50 发布

阅读量285

点赞数

文章标签： vue.js 后端 ajax跨域问题

本文链接：https://blog.csdn.net/qq_41416539/article/details/112984816

版权

本文探讨了在前后端分离的场景下，由于浏览器同源策略导致的跨域问题。通过分析CORS（跨域资源共享）机制，解释了预检请求（preflight request）的原因，并提供了两种解决方案：在后端添加'Access-Control-Allow-Origin'响应头或使用@CrossOrigin注解来允许跨域请求。最后，提到了相关参考资料以便进一步学习。

摘要由CSDN通过智能技术生成

问题描述：

前后端分布在不同的电脑上，前端调用后端提供的接口出现如下错误（原来的错误不能复现了，与下面这张是网图类似）：

在这里插入图片描述

报错：access to XMLHttpRequest at "xx"from origin"xxx"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. 含义：在“xx”从原点“xxx”访问XMLHttpRequest已经被CORS策略阻止:对preflight请求的响应没有通过访问控制检查:在请求的资源上没有“access - control - allow - origin”头。

原因分析：

访问控制检查 关于浏览器的同源安全策略参见这篇文章，写得有趣可懂没错，就是Access-Control-Allow-Origin，跨域
CORS
CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出ajax请求，从而克服了AJAX只能同源使用的限制。CORS依赖于服务器端的设定，只要在服务器端进行了设置，就可以实现相应的资源访问。
preflight request
preflight request(预检请求)，是浏览器为了事先获知服务器是否允许该跨域请求，防止出现跨域请求正常发起，而返回的结果被浏览器拦截造成的错误。

解决方案：

- 方案1

既然说“在请求的资源上没有‘access - control - allow - origin’头”，那么就加上这个头！

var time = new Date();
      var time = time.getTime() + 24*60*60*1000;//按ms计算，一天
      var time2 = new Date(time);
      var timeObj = time2.toGMTString();
      res.writeHead(200,{'content-Type':'text/plain',"Access-Control-Allow-Origin":null,
        'Set-Cookie':'myCookie="type=ninja",language="javascript";Expires = '+timeObj,'Access-Control-Allow-Credentials':true});
      res.end(util.inspect(url.parse(req.url, true)));//处理get请求，并将结果传递给客户端

- 方案2

我的解决方案是在编写接口相应请求的代码里面加上跨域的注解@CrossOrigin。

@CrossOrigin(origins ="*",maxAge = 3600)
@RequestMapping("/index")
@ResponseBody
public List<Movie> findAll(){
    System.out.print(service.findAll());
    return service.findAll();
}