请问怎样用原生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 跑个本地服务负责转发或者缓存到本地也是一样的效果