37.Vue3：网络请求跨域解决方案

什么是同源，什么是跨域，跨域解决

---

概述

同源？

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

什么是跨域？

浏览器不可以执行其他网站的脚本。是由浏览器的同源所造成的。也就是说，例如一个网站http://iwenwiki.com,当协议（http://）,域名（iwenwiki.com），端口（可以省略:8080）不同时，就会产生跨域问题。

测试跨域：

<template>
  <div class="hello">
    <h1>跨域解决方案之proxy</h1>
  </div>
</template>

<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>

 

解决方案：前台proxy

组件中

<template>
  <div class="hello">
    <h1>跨域解决方案之proxy</h1>
  </div>
</template>

<script>
import axios from "axios"

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

在vue.config.js中

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // 前台解决方案：proxy
  devServer:{
    proxy:{
      '/api':{
        target:'http://iwenwiki.com/',
        changeOrigin:true
      }
    }
  }
})

---

总结

前台解决：proxy

后台解决：cors