前端跨域问题的解决思路

目录

前言

跨域问题的解决思路

一般跨域的解决方案


++++前言++++

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

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

由于是项目比较简单,直接使用了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;

}

解决了解决了。

相关推荐
袁煦丞5 分钟前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作
天天扭码13 分钟前
从图片到语音:我是如何用两大模型API打造沉浸式英语学习工具的
前端·人工智能·github
鱼樱前端2 小时前
今天介绍下最新更新的Vite7
前端·vue.js
coder_pig2 小时前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
万少2 小时前
01-自然壁纸实战教程-免费开放啦
前端
独立开阀者_FwtCoder2 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
yuki_uix3 小时前
AI辅助网页设计:从图片到代码的实践探索
前端
我想说一句3 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
陈随易3 小时前
MoonBit助力前端开发,加密&性能两不误,斐波那契测试提高3-4倍
前端·后端·程序员
小飞悟3 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试