axios跨域访问

axios 的跨域问题,分以下几种情况:

 

1、 server 端不支持跨域,比如遇到下面的错误就是这种情况

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://xxx.com' is therefore not allowed access.

解决方案:如果 server 端是自己开发的,那么修改相关代码支持跨域即可。如果不是自己开发的,那么可以自己写个后端转发该请求,用代理的方式实现。

 

2、 server 端支持跨域,但不能响应 OPTIONS 请求,比如在开发者工具中看到下图中的情况,说明 Nginx 不能响应 OPTIONS 请求。

3423449275-589c10aee23ae_articlex.png

出现 OPTIONS 请求的原因:

 

跨源资源共享标准通过新增一系列 HTTP 头,让服务器能声明哪些来源可以通过浏览器访问该服务器上的资源。另外,对那些会对服务器数据造成破坏性影响的 HTTP 请求方法(特别是 GET 以外的 HTTP 方法,或者搭配某些MIME类型的POST请求),标准强烈要求浏览器必须先以 OPTIONS 请求方式发送一个预请求(preflight request),从而获知服务器端对跨源请求所支持 HTTP 方法。在确认服务器允许该跨源请求的情况下,以实际的 HTTP 请求方法发送那个真正的请求。服务器端也可以通知客户端,是不是需要随同请求一起发送信用信息(包括 Cookies 和 HTTP 认证相关数据)。

出自 HTTP访问控制(CORS)

 

解决方案如果 server 端也支持简单请求(见下方定义),特别是 axios POST请求时,默认使用 JSON 格式,改成 string 问题就解决了!官方推荐的修改方法;如果 server 端只支持 JSON 格式的 POST 请求,看看能不能修改 server 的配置,让它支持 OPTIONS,参考资料;如果 server 改不了,那就又只能自己写代理了。

 

简单请求:1. 只使用 GET, HEAD 或者 POST 请求方法。如果使用 POST 向服务器端传送数据,则数据类型(Content-Type)只能是 application/x-www-form-urlencoded, multipart/form-data 或 text/plain中的一种。2. 不会使用自定义请求头(类似于 X-Modified 这种)。
 

axios({
  url: '/user',
  method: 'post',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  },
  transformRequest: [function (data) {
    // Do whatever you want to transform the data
    let ret = ''
    for (let it in data) {
      ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
    }
    return ret
  }],
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})


传的是一个json对象,可以用file_get_contents("php://input")获取到json串,然后转化为object获取属性

修改时间 2018-05-16

真诚赞赏,手留余香
赞赏
随机推荐
Vue 3.0 快速教程
PHPExcel读取和写入Excel文件
2018.1.26 Night King
Express.js 日志模块
display:inline-block元素之间空隙的产生原因和解决办法
jquery原生幻灯
javascript获取当前时间
vue.js 怎么给v-html指令绑定的数据添加样式
20190104 手绘口罩女
Workerman 实现 WebSocket IM 聊天系统【后端篇】