跨域PHP代理到本地后Vue 数据展示 原
如果我们直接使用网上的API接口来测试页面效果，会显示跨域错误;
解决方法：使用代理到本地的方法；
假如api是：http://c.m.163.com/nc/article/headline/T1348647853363/0-40.html
后台服务 proxy.php
<?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 页面
<!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 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
