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

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

概述

同源？

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

什么是跨域？

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

测试跨域：

1.  
   <template>
2.  
   <div class="hello">
3.  
   <h1>跨域解决方案之proxy</h1>
4.  
   </div>
5.  
   </template>
6.  
    
7.  
   <script>
8.  
   import axios from "axios"
9.  
    
10.  
    export default {
11.  
    name: 'HelloWorld',
12.  
    mounted(){
13.  
    axios.get("http://iwenwiki.com/api/FingerUnion/list.php")
14.  
    .then(res=>{
15.  
    console.log(res.data);
16.  
    })
17.  
    }
18.  
    }
19.  
    </script>

解决方案：前台proxy

组件中

1.  
   <template>
2.  
   <div class="hello">
3.  
   <h1>跨域解决方案之proxy</h1>
4.  
   </div>
5.  
   </template>
6.  
    
7.  
   <script>
8.  
   import axios from "axios"
9.  
    
10.  
    export default {
11.  
    name: 'HelloWorld',
12.  
    mounted(){
13.  
    axios.get("/api/FingerUnion/list.php")
14.  
    .then(res=>{
15.  
    console.log(res.data);
16.  
    })
17.  
    }
18.  
    }
19.  
    </script>

在vue.config.js中

1.  
   const { defineConfig } = require('@vue/cli-service')
2.  
   module.exports = defineConfig({
3.  
   transpileDependencies: true,
4.  
   // 前台解决方案：proxy
5.  
   devServer:{
6.  
   proxy:{
7.  
   '/api':{
8.  
   target:'http://iwenwiki.com/',
9.  
   changeOrigin:true
10.  
    }
11.  
    }
12.  
    }
13.  
    })

总结

前台解决：proxy

后台解决：cors

这篇好文章是转载于：学新通技术网