vue3学习（网络请求跨域解决方案）

网络请求跨域解决方案

Js的网络请求采取的是同源策略

同源策略是浏览器的一项安全策略，浏览器只允许js代码请求和当前所在服务器域名，端口，协议相同的数据接口上的数据，这就是同源策略。

也就是说，当协议、域名、端口任意一个不相同时，都会产生跨域问题。

跨域错误提示：

 

跨域解决方案：

1. 后台解决：cors
2. 前台解决：proxy(讲解本法)

首先代码需要实行跨域。

本地地址为http://localhost:8080/

<script>

import axios from "axios"



export default {

  name: 'HelloWorld',

  mounted(){

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

    .then(res=>{

      console.log(res.data);

    })

  }

}

</script>

在组件中实现网络请求跨域。

 

解决：

打开vue.config.js 添加代码

devServer:{

    proxy:{

      '/api':{

        target:'<url>',//此处添加所要跨的域，如http://iwenwiki.com

        changeOrigin:true

      }

    }

  }

将原来网络请求的地址"http://iwenwiki.com/api/FingerUnion/list.php改成api/FingerUnion/list.php。

会发现还是无法获取数据，当解决完跨域配置之后，要记得重启一下服务器。