前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >跨域PHP代理到本地后Vue 数据展示 原

跨域PHP代理到本地后Vue 数据展示 原

作者头像
tianyawhl
发布2019-06-13 16:26:12
4940
发布2019-06-13 16:26:12
举报
文章被收录于专栏:前端之攻略

如果我们直接使用网上的API接口来测试页面效果,会显示跨域错误;

解决方法:使用代理到本地的方法;

假如api是:http://c.m.163.com/nc/article/headline/T1348647853363/0-40.html

后台服务  proxy.php

代码语言:javascript
复制
<?php
//$name = $_GET["name"];
//$info =$_GET["info"];
$crossUrl = "http://c.m.163.com/nc/article/headline/T1348647853363/0-40.html";
$res = file_get_contents($crossUrl);
echo $res;
?>

vue 页面

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Vue Bootstrap Table Demo</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="../../bootstrap/css/bootstrap.min.css">
</head>

<body class="">
    <div>
        <table class="table table-bordered" id="tableTest1">
            <tr v-for="item in message.T1348647853363">
                <td v-for="value in item">
                    <ul v-if="value instanceof Array">
                        <li v-for="content in value">
                            <div v-for="value in content">{{value}}</div>
                        </li>
                    </ul>
                    <template v-else-if="value instanceof Object">
                        <div v-for="value in value">
                            {{value}}
                        </div>
                    </template>
                    <template v-else>{{value}}</template>
                </td>
                <!--  <td>{{item.votecount}}</td>
				<td>{{item.docid}}</td>
				<td>{{item.lmodify}}</td>
				<td>{{item.source}}</td>
				<td>{{item.postid}}</td> -->
            </tr>
        </table>
    </div>
    <script src="../../jQuery/jQuery-2.1.4.min.js"></script>
    <script src="../../dist/vue.js"></script>
    <script>
    var app = new Vue({
        el: "#tableTest1",
        data: {
            message: []
        },
        created() {
            $.get("http://c.m.163.com/nc/article/headline/T1348647853363/0-40.html", data => {
                var data = JSON.parse(data);
                console.log(data)
                this.message = data;
            })
        }
    })
    </script>
</body>

</html>

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档