H5W3
当前位置:H5W3 > 问答 > 正文

前端人员能独自解决掉跨域问题吗?

今天,一群前端同事围着我,让我这个“前端大佬”解决跨域的问题,我也是前端。 我紧张的要命。
浏览器里接口请求不通,如下报错:

Access to fetch at ‘https://cmps.test.ceenk.com:9001/mgw.htm’ from origin ‘http://111.205.51.131:8876’ 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. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

请问,我有办法解决吗?
另外问一下,跨域问题是否与前端有关系?

回答

这个问题得从两个方面来说:
开发环境 可以利用 WebPack Proxy 解决跨域问题(或者任何能在本地部署反向代理的服务),更简单点测试环境提供允许跨域的后端服务
生产环境 只能用一个不健康的形式了,见9种常见的前端跨域解决方案(详解)

要么不跨域,要么让所访问的服务允许跨域即可

跨域问题的本质是什么?
就是浏览器禁止了,不让非同源的请求通过,理论上来说,跟前端没半点关系,需要接口层面返回允许跨域的请求头

怎么做呢良心建议是甩给后端,这不是我前端的锅,这是一劳永逸的办法,1本来就是后端的事情,为什么要前端揽下来,2增加了前端开发成本,想对于后端响应头加几个字段,前端要另外维护一个服务

另外看到底是不是跨域问题要看接口返回的响应头,因为有些接口错误404之类的在控制台报的错也是跨域一样的错

前端自己解决的方法:
webpack 配置 proxy server代理
nginx 配置
自建一个node,使用三方库或者手写代理

总结就是尽量让后端做,实在不行自己建一个服务 -> 这个服务允许跨域 -> 转发到真正后端,绕过浏览器

不能哦,想想如果你不需要支付宝同意,在你的网站就可以代替用户去调用支付宝接口,那不是乱了套了
跨域必须要后端进行一定的支持

谢谢各位回答,我记录一下这个本地临时调试的方式:
关闭浏览器同源策略的方法

  1. 桌面上 浏览器快捷方式 鼠标右键 属性> 快捷方式> 目标>

“C:\Program Files (x86)\Google\Chrome\Application\chrome.exe” –args –disable-web-security –user-data-dir=”C:\abc”
》保存。

  1. C 盘下建个abc 文件夹 (因为 –user-data-dir=”C:\abc”)
  2. 然后启动浏览器,访问原先的跨域页面,就没有跨域的问题了。

未经允许不得转载:H5W3 » 前端人员能独自解决掉跨域问题吗?

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址