【VUE跨域】vue中使用AJAX jsonp实现跨域

最新推荐文章于 2024-08-20 09:05:48 发布

劲枫

最新推荐文章于 2024-08-20 09:05:48 发布

阅读量2.3k

点赞数

分类专栏： VUE 文章标签： vue中ajax跨域

本文链接：https://blog.csdn.net/TCF_JingFeng/article/details/81153915

版权

VUE 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

1、vue中引入jquery，组件中的代码如下

<template>
    <div>
        1、ajax jsonp跨域
        2、PHP后台验证header头信息
    </div>
</template>


<script>
    import querystring from 'querystring'
    export default {
        name: 'jsonp',
        created() {
            $.ajax({
                url: 'http://localhost/tencent/jsonp/index.php',
                type: 'post',
                dataType: 'jsonp',
                data: {
                    name: "xiaoming",
                    id: '001'
                },
                success: function (data) {
                    console.log(data)
                },
                error: function (data) {
                    console.log(data);
                }
            });
        }
    }
</script>

2、PHP后端代码，注意是GET方式，jsonp只有get方式

<?php
$name = $_GET['name'];
$id = $_GET['id'];
$callback = $_GET['callback'];

指定允许其他域名访问
//header("Access-Control-Allow-Origin:*");
 响应类型
//header("Access-Control-Allow-Methods:POST,GET,PUT,DELETE,OPTIONS");
 响应头设置
//header("Access-Control-Allow-Headers:x-requested-with,content-type");
//
//header('Access-Control-Allow-Headers:TOKEN,test');
header("Content-Type:application/x-www-form-urlencoded,charset=utf-8");
if (true) {
    $data = array(
        'name' => $name,
        'id' => $id,
        'msg'=>'返回成功'
    );
    $jsondata = json_encode($data);
//    echo $jsondata;
//    exit($callback."($jsondata)");
    echo $callback."(".$jsondata.")";

} else {
    $data = array(
        'msg' => '请求不合法',
    );
    $jsondata = json_encode($data);
//    echo $jsondata;
//    exit($callback . "($jsondata)");
    echo $callback."(".$jsondata.")";
}
?>