建设部网站 专业评估网络营销渠道建设方案
目录
前言
跨域问题的解决思路
一般跨域的解决方案
前言
做了一个简单页面，做了一些数据埋点，想通过企业微信机器人来推送数据，遇到了一些问题，顺便记录下。
跨域问题的解决思路
由于是项目比较简单，直接使用了ajax去请求，代码如下
$.ajax({type: 'POST',url: 'XXXXX',async: true,data: $.toJSON(data),contentType:'application/json;charset=utf-8',dataType: 'json',success: function (data) {console.log("data",data)},error: function (error) {console.log("error",error);}
})请求的时候发现了跨域问题
Access to XMLHttpRequest at 'https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=b38aa4d8-a08e-4a91-' from origin 'null' 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.这里为什么会跨域呢？因为我在我自己域名上去请求其他域名。
一般跨域的解决方案
- jsonp(微信机器人接口只支持json)
- 后端设置跨域 (我也改不了企业微信后台的接口啊)
那有什么方案呢？思路决定出路啊，朋友们
先明白问题所在，是因为浏览器同源政策导致跨域的问题，那我请求的域名是同源的不就好了吗？
下面说下具体方法
- 使用nginx进行转发
我只需要把ajax请求的url更换成自己的域名，然后使用nginx转发到企业微信接口，就完美绕开了跨域问题
$.ajax({type: 'POST',url: 'https://domain/test',async: true,data: $.toJSON(data),contentType:'application/json;charset=utf-8',dataType: 'json',success: function (data) {console.log("data",data)},error: function (error) {console.log("error",error);}
})- nginx配置
location /test/ {proxy_pass https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=b38aa4d8-a08e-4a91;proxy_method POST;
}- 这样就解决了跨域的问题，通过服务器转发来实现
但是问题又来了，nginx转发请求从POST变成GET
可以看到上面的配置是post请求到nginx，nginx在把请求转发到企业微信接口
第一次http请求是post，第二次居然自动转换成get。
原来nginx在配置location的时候，如果多了/，那么会自动变成get
修改后如下
location /test {proxy_pass https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=b38aa4d8-a08e-4a91;proxy_method POST;}解决了解决了。