WEB 服务跨域的坑

需求:

web搭建在阿里云服务器
windows:搭建一个本地服务的web api服务用来调用PC服务 测试浏览器:Chrome

最开始出现的问题就是跨域,于是使用了最直接的方式,在服务端解决跨域

代码用go测试,框架用的beego

var success = []byte("SUPPORT OPTIONS")
var corsFunc = func(ctx *context.Context) {
   origin := ctx.Input.Header("Origin")
   ctx.Output.Header("Access-Control-Allow-Methods", "OPTIONS,DELETE,POST,GET,PUT,PATCH")
   ctx.Output.Header("Access-Control-Max-Age", "3600")
   ctx.Output.Header("Access-Control-Allow-Headers", "X-Custom-Header,accept,Content-Type,Access-Token")
   ctx.Output.Header("Access-Control-Allow-Credentials", "true")
   ctx.Output.Header("Access-Control-Allow-Origin", origin)
   if ctx.Input.Method() == http.MethodOptions {
      // options请求，返回200
      ctx.Output.SetStatus(http.StatusOK)
      _ = ctx.Output.Body(success)
   }
}

func init() {
   beego.InsertFilter("/*", beego.BeforeRouter, corsFunc)
   beego.Router("/test", &controllers.MainController{})
}

这样应该就没问题了. 于是打开网页,还是显示跨域

jquery.min.js:4 Access to XMLHttpRequest at 'http://127.0.0.1:7777/test' from origin 'http://47.xx.xx.xx:8080' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space local.

反正一开始也没仔细去看这行错误,只看到了has been blocked by CORS policy 就知道是跨域了,最后找了很多办法, 就是web调用native服务 于是就有了以下几种方案:

1.ActiveX插件
2.npapi
3.ppapi
4.xbap
5.url protocol
6.websocket
7.本地web服务,解决跨域,(这不还是我的方案吗)

当然还发现一种webRTC的方案,但是这种方案实现难度大,暂时不考虑

最后看到别人也是用跨域来解决的,所以还是想尝试一下. 又注意到了那行报错.于是就尝试一下贴到百度查一下,看看有没有其他人遇到过.

结果还真的注意到了有去设置chrome浏览器的, 因为在这之前我也在怀疑是不是浏览器的安全策略导致了我无法访问本地资源.就尝试了一下下面的方案:

方法1: chrome浏览器输入: chrome://flags/
然后输入: insecure

方法2: chrome浏览器输入: chrome://flags/#block-insecure-private-network-requests

然后找到 Blockinsecureprivate network requests. 并且禁用。

最后重启浏览器

这样一操作,就神奇的发现请求居然可以了.

但是这样操作需要修改浏览器, 操作性不太友好. 后续看看还能不能找到其他方式