javascript - 请问怎样用原生js在本地html文件调用跨域json里边的内容？

Question

我想在本地html文件里写一段script，或者jsonp但是不成功
有没有大神写个例子
跨域的链接附上
https://danjuanfunds.com/djapi/fund/nav/history/015861?page=2...
这是个基金净值接口，格式是json
随便能输出一点数据就行,不用ajax和后端

Answer 1

正常来说，跨域是需要 前后端 一起协商解决的，如果是别人的接口，那可以试试在本地配置代理服务器先请求一波，再转发给当前页面

（因为跨域是源于浏览器的同源限制，所以两个服务器之间 不会 存在跨域问题）

所以我们可以借助这个特点去 欺骗 下浏览器

// vue.config.js 配置const {    defineConfig} = require('@vue/cli-service')module.exports = defineConfig({    devServer: {        proxy: {            // 配置代理            '/api': {                target: 'https://danjuanfunds.com', // 实际请求的后端接口地址                ws: true,                changeOrigin: true,                pathRewrite: {                    '^/api': '' // 将'/api'替换为空字符串，即去掉/api前缀                }            }        }    }    ,})

// 组件请求代码<script>    import axios from 'axios'    export default {        mounted() {            axios.get('/api/djapi/fund/nav/history/015861?page=2&size=20')                .then(response => {                    console.log(response.data);                })                .catch(error => {                    console.error(error);                });        }    }</script>

正常发生请求返回会报跨域问题：

经过以上处理，正常拿到数据：

当然，如果想用原生 html 访问，那就用 node.js 跑个本地服务负责转发或者缓存到本地也是一样的效果