thinkjs框架 跨域请求、OPTIONS预请求解决方法

环境:nodeJs项目用thinkjs框架写的,前端ajax请求。
问题:前端ajax跨域请求nodeJs项目,浏览器报错。显示OPTIONS预请求到后端,因为后端没有处理OPTIONS请求,所以报500错误。后面紧跟着真正请求(post/get等)浏览器控制台报跨域的错误。报错信息如下图

解决方法: 请求头设置Access-Control-Allow-Origin:“*”。具体代码:base.js
 

module.exports = class extends think.Controller {

    async __before() {

      //配置跨域

        this.header("Access-Control-Allow-Origin", this.header("origin") || "*");

        //允许请求头参数进入

        this.header("Access-Control-Allow-Headers", "x-requested-with");

        //处理预请求,给body设置一个值,否则会包404

         if(this.method === "OPTIONS"){

             this.ctx.body = 200;

             return false;

         }

    }

};

注意:如果前端请求头里面设置了field,这里也要设置"Access-Control-Allow-Headers", "x-requested-with" 。其中x-requested-with 是前端请求头设置的field。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 在 uni-app 中,解决请求方法有以下几种: 1. 使用 jsonp 请求 2. 使用代理,在本地启动一个服务器来作为代理,发起请求时以本地服务器为中介,避免的限制 3. 在服务器端配置,如果服务器端允许,则可以在服务器端设置 HTTP header,允许访问。例如,在 Express.js 中可以使用 cors 中间件来实现。 如果你想深入了解请求的原理,你可以参考以下资料: - 资源共享 (CORS):https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS - HTTP 访问控制 (CORS):https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS - 请求的简单请求请求:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS/Simple_requests_and_preflight_requests ### 回答2: 在uni-app中请求解决方法有以下几种: 1. 使用uni.request方法发送请求时,在请求header中添加"Access-Control-Allow-Origin"字段,允许指定的名或通配符"*",例如: ``` uni.request({ url: 'http://example.com/api', method: 'GET', header: { "Access-Control-Allow-Origin": "*" }, success: function(res) { console.log(res.data); } }); ``` 2. 在uni-app的开发配置文件manifest.json中,添加"networkTimeout"字段来配置请求的超时时间,例如: ``` "networkTimeout": { "request": 10000, "connectSocket": 10000, "uploadFile": 10000, "downloadFile": 10000 } ``` 3. 使用uni.request方法发送请求时,设置withCredentials为true,开启请求携带cookie功能。但需要注意服务器端也需要设置响应头允许接收cookie,例如: ``` uni.request({ url: 'http://example.com/api', method: 'GET', withCredentials: true, success: function(res) { console.log(res.data); } }); ``` 4. 在uni-app的开发配置文件manifest.json中,添加"filters"字段配置全局过滤器来处理请求,例如: ``` "filters": { "request": { "origin": "*", "x-requested-with": "*", "content-type": "application/json" } } ``` 以上是一些常用的uni-app中处理cors请求方法,根据具体情况选择适合的解决方案。 ### 回答3: 在UniApp中解决问题可以通过配置服务器设置CORS(资源共享)来实现。 首先,在后端服务器上设置CORS。在服务器返回响应时,需要在响应头中添加相关的CORS头信息,允许前端访问该接口。常见的CORS头信息包括:Access-Control-Allow-Origin、Access-Control-Allow-Headers、Access-Control-Allow-Methods等。具体配置方法可以根据后端服务器的不同而有所差异,请根据服务器文档进行设置。 其次,在UniApp中发起请求时,需要在请求头中添加Origin字段表示请求的源地址。同时,UniApp默认会在请求头中自动添加Referer字段来表示访问来源,可根据需要进行调整。 另外,UniApp还提供了特定的API来设置请求的配置,可以通过修改uni.request方法的header参数或通过配置uni.request.defaults.header来添加请求头,以适应不同的CORS设置。 需要注意的是,前端涉及到请求时,在接口上必须进行请求(Preflight Request)的检测,包括发送一个OPTIONS请求以校验服务器是否允许当前请求。 总结起来,解决UniApp中的CORS问题,需要在后端服务器进行相关CORS设置,并在UniApp中添加请求头信息,确保请求能够正常访问后端接口。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值