vue如何解决跨域？原理？

Vue.js本身并不直接解决跨域问题，而是依赖于浏览器的同源策略。但是，Vue提供了一些方法来帮助我们解决跨域问题。

原理：

• 浏览器的同源策略规定，不同源（协议、域名、端口）之间的网络请求受到限制，无法直接进行跨域访问。
• Vue通过使用代理、JSONP、CORS（跨来源资源共享）等方式，绕过浏览器的同源策略，实现跨域请求。

方法：

1. 代理方式：

   • 在开发环境中，可以配置一个代理服务器，将前端请求发送到同域下的服务器上，再由代理服务器转发请求到目标服务器，从而实现跨域。
   • 例如，使用vue.config.js文件配置代理：

     module.exports = {
       devServer: {
         proxy: {
           '/api': {
             target: 'http://example.com',
             changeOrigin: true,
             pathRewrite: {
               '^/api': ''
             }
           }
         }
       }
     };
     

     然后，在Vue组件中发送请求时，使用相对路径/api代替完整的URL。

2. JSONP方式：

   • JSONP利用了<script>标签的src属性可以跨域的特性，通过动态创建<script>标签来加载远程脚本，并将数据作为回调函数的参数返回。
   • 例如，使用Vue的axios库实现JSONP请求：

     import axios from 'axios';
     
     axios.jsonp('http://example.com/api', {
       params: {
         callback: 'jsonpCallback'
       }
     }).then(response => {
       // 处理响应数据
     });
     

3. CORS方式：

   • 如果目标服务器允许跨域请求，可以在服务器端设置合适的CORS响应头，允许特定的源进行跨域访问。
   • 例如，在服务器端的响应中添加以下响应头：

     Access-Control-Allow-Origin: http://example.com
     Access-Control-Allow-Methods: GET, POST, OPTIONS
     Access-Control-Allow-Headers: X-Requested-With, Content-Type
     

举例： 假设前端应用部署在http://localhost:8080，需要访问后端API服务在http://api.example.com上的接口。可以通过配置代理方式解决跨域问题。

1. 在vue.config.js中配置代理：

   module.exports = {
     devServer: {
       proxy: {
         '/api': {
           target: 'http://api.example.com',
           changeOrigin: true,
           pathRewrite: {
             '^/api': ''
           }
         }
       }
     }
   };
   

2. 在Vue组件中发送请求：

   import axios from 'axios';
   
   axios.get('/api/users').then(response => {
     // 处理响应数据
   });
   

通过配置代理后，前端发送的/api/users请求会被代理服务器转发到http://api.example.com/users，成功实现跨域访问。