前端跨域问题的解决思路

目录

前言

跨域问题的解决思路

一般跨域的解决方案


++++前言++++

做了一个简单页面,做了一些数据埋点,想通过企业微信机器人来推送数据,遇到了一些问题,顺便记录下。

++++跨域问题的解决思路++++

由于是项目比较简单,直接使用了ajax去请求,代码如下

java 复制代码
$.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);
  }
})

请求的时候发现了跨域问题

java 复制代码
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转发到企业微信接口,就完美绕开了跨域问题

java 复制代码
$.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配置
java 复制代码
 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

修改后如下

java 复制代码
 location /test {

        proxy_pass https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=b38aa4d8-a08e-4a91;

        proxy_method POST;

}

解决了解决了。

相关推荐
MrGaoGang19 分钟前
耗时1年,终于我也拥有属于自己的AI工作流
前端·agent·ai编程
没有鸡汤吃不下饭32 分钟前
前端【数据类型】 No.1 Javascript的数据类型与区别
前端·javascript·面试
跟橙姐学代码35 分钟前
Python时间处理秘籍:别再让日期时间卡住你的代码了!
前端·python·ipython
汤姆Tom40 分钟前
从零到精通:现代原子化 CSS 工具链完全攻略 | PostCSS × UnoCSS × TailwindCSS 深度实战
前端·css·面试
菜市口的跳脚长颌40 分钟前
Web3基础
前端
RoyLin43 分钟前
TypeScript设计模式:代理模式
前端·后端·typescript
IT_陈寒2 小时前
Vue3性能优化实战:这5个技巧让我的应用加载速度提升了70%
前端·人工智能·后端
树上有只程序猿2 小时前
react 实现插槽slot功能
前端
stoneship3 小时前
Web项目减少资源加载失败白屏问题
前端