前端跨域问题的解决思路

目录

前言

跨域问题的解决思路

一般跨域的解决方案


++++前言++++

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

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

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

}

解决了解决了。

相关推荐
wkj0013 小时前
vue中 js-cookie 用法
前端·javascript·vue.js
GoldKey7 小时前
gcc 源码阅读---语法树
linux·前端·windows
Xf3n1an8 小时前
html语法
前端·html
张拭心8 小时前
亚马逊 AI IDE Kiro “狙击”Cursor?实测心得
前端·ai编程
烛阴8 小时前
为什么你的Python项目总是混乱?层级包构建全解析
前端·python
@大迁世界9 小时前
React 及其生态新闻 — 2025年6月
前端·javascript·react.js·前端框架·ecmascript
红尘散仙10 小时前
Rust 终端 UI 开发新玩法:用 Ratatui Kit 轻松打造高颜值 CLI
前端·后端·rust
新酱爱学习10 小时前
前端海报生成的几种方式:从 Canvas 到 Skyline
前端·javascript·微信小程序
袁煦丞10 小时前
把纸堆变数据流!Paperless-ngx让文件管理像打游戏一样爽:cpolar内网穿透实验室第539个成功挑战
前端·程序员·远程工作
慧慧吖@10 小时前
关于两种网络攻击方式XSS和CSRF
前端·xss·csrf