微信小程序跨域请求 Invalid CORS request （403）
发布于 6 年前 作者 wlu 4848 次浏览 来自 问答

一：现象

  1. 微信小程序用“wx.request”通过POST的HTTP request发出请求，结果后台返回Invalid CORS request （403）

（1）发出POST请求：

wx.request({
        url: url,
        data: billingData,
        method: 'POST',
        success: successHandler,
        fail: failureHandler
    })

（2）浏览器显示后台返回 Invalid CORS request （403）

{ 
   "data":"Invalid CORS request",
   "header":{ 
      "Vary":"Origin,Access-Control-Request-Method,Access-Control-Request-Headers",
      "X-Content-Type-Options":"nosniff",
      "X-XSS-Protection":"1; mode=block",
      "Cache-Control":"no-cache, no-store, max-age=0, must-revalidate",
      "Pragma":"no-cache",
      "Expires":"0",
      "X-Frame-Options":"DENY",
      "Content-Length":"20",
      "Date":"Wed, 06 Feb 2019 13:15:25 GMT"
   },
   "statusCode":403,
   "cookies":[ 
 
   ],
   "errMsg":"request:ok"
}
  1. 微信小程序用“wx.request”通过GET的HTTP request发出请求，结果后台返回数据正常

二：问题

  1. 本人后台使用java Spring 框架。处理跨域请求时，allowed origin 应该填写哪一个？

据悉，微信小程序的wx.request为微信小程序的后台请求我们自己的后台。

那么如何得知微信小程序的后台的origin，从而设定我们自己后台的 allowed origin 呢？

[@Bean](/user/Bean)
    public CorsConfigurationSource corsConfigurationSource() {
        // Development environment - Spring security CORS support
        CorsConfiguration configuration = new CorsConfiguration();
 
    configuration.setAllowedOrigins(Arrays.asList(CORS_ALLOWED_ORIGIN_HOST_1, CORS_ALLOWED_ORIGIN_HOST_2));
       ...
        return source;
    }
  1. 为何GET请求不会有此问题发生，而POST会导致跨域请求的问题？

感谢各位的解答！

3 回复

解决方法

小程序请求头加个 system 字段

String system = request.getHeader(name: ‘system’);

后台判断如果是小程序的 system，则放行

String origin = request.getHeader(name: ‘origin’);

response.setHeader(name: “Access-Control-Allow-Origin”, origin);

追问：

经测试，小程序在本地开发时的origin为“http://127.0.0.1:61283”__
__

将“http://127.0.0.1:61283”添加为后台 allowed origin 时可以正常返回数据。

若小程序发布以后，后台 allowed origin 应该添加哪个 host?


期待各位解答！

楼主, 我也遇到相同的问题, 请问解决了吗?

回到顶部