vue---网络请求跨域解决方案

最新推荐文章于 2025-03-05 12:01:55 发布

程序员的客栈

最新推荐文章于 2025-03-05 12:01:55 发布

阅读量542

点赞数 2

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/cmHuney/article/details/141296510

版权

网络请求会产生跨域，不是每一个网络请求的地址或者说每个接口地址都一定能拿到数据。

JS跨域：

JS采取的是同源策略，同源策略是浏览器的一项安全策略，浏览器只允许js代码请求和当前所在服务器域名，端口，协议相同的数据接口上的数据，这就是同源策略。也就是说，当协议，域名，端口任意一个不相同时，都会产生跨域问题。

跨域错误提示信息：

跨域解决方案：

①后台解决：cors

②前台解决：proxy

解决过程：

1、网络请求安装：cnpm install --save axios

2、启动服务：npm run serve

3、打开components中的HelloWorld.vue，输入：

<template>
    <div class="hello">
        <h3>跨域解决方案</h3>
    </div>
</template>

<script>
    import axios from "axios"
    export default{
        name:'HelloWorld',
        mounted(){
            axios.get("http://iwenki.com/api/FingerUnion/list.php")
            .then(res =>{
                 console.log(res.data);
             })
        }
    }
</script>

此时产生跨域错误在控制台。

4、打开vue.config.js文件：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
        transpileDependencies:true,
        devServer:{
            porxy:{
                '/api':{
                    //协议：http，端口没写默认80，域名：iwenwiki.com
                    target:'http://iwenwiki.com/',
                    changeOrigin:true
                }
            }
    }
})

把HelloWorld.vue文件中前面地址删掉：

axios.get("http://iwenki.com/api/FingerUnion/list.php")

变成：

axios.get("/api/FingerUnion/list.php")

此时我们就解决了跨域问题。

注意：解决完跨域配置之后，要记得重启服务器才行。也就是在终端Ctrl+C退出运行状态，重新启动：npm run serve