ajax跨域实现api 接口调用
背景: 想实现跨域去调用接口, 然后同时支持下次调用,能够带cookie信息过来,同时支持来自多个源头的域名的跨域调用。
1.这样支持来自所有域名的跨域调用:
不支持跨域是,浏览器报错:
在api接口服务端加上相应的协议头:
1 2 | header("Access-Control-Allow-Origin: *',); header( 'Access-Control-Allow-Headers: X-Requested-With, Content-Type' ); |
但是,这样的api接口,不支持cookie.
2.如果想支持cookie, 需要加上
1 | header( 'Access-Control-Allow-Credentials: true' ); |
但是这样的话,前面服务端设置的这个头,浏览器就会报错。说是access-control-allow-origin头不能 用 * 这个通配符。
1 | header("Access-Control-Allow-Origin: *',); |
浏览器报错如下图:
必须改成具体的某个域名。 但是,我们的api又希望支持来自许多不同域名的跨域访问,怎么办呢,这时候,在服务端做个动态的判断处理就ok了。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <?php $ret = array ( 'name' => isset( $_POST [ 'name' ])? $_POST [ 'name' ] : '' , 'gender' => isset( $_POST [ 'gender' ])? $_POST [ 'gender' ] : '' ); header( 'content-type:application:json;charset=utf8' ); $origin = isset( $_SERVER [ 'HTTP_ORIGIN' ])? $_SERVER [ 'HTTP_ORIGIN' ] : '' ; $allow_origin = array ( 'http://www.client.com' , 'http://www.client2.com' ); if (in_array( $origin , $allow_origin )){ header( 'Access-Control-Allow-Origin:' . $origin ); header( 'Access-Control-Allow-Methods:POST' ); header( 'Access-Control-Allow-Headers:x-requested-with,content-type' ); } echo json_encode( $ret ); ?> |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步