前端基础之《Vue（23）—跨域问题》

一、跨域问题说明

1、每一个"域"都由协议、IP地址和端口号，这三部分组成。那么什么是跨域？当你从当前域访问另一个域时，如果上述三个部分有任何一个部分不相同，就是跨域

比如：http://localhost:8080 --> http://localhost:9999 是跨域

2、为什么跨域浏览器会拒绝

在所有浏览器中都内置了一个安全策略，叫做CORS同源策略，这个同源策略有什么特点呢？同源策略会阻塞ajax跨域请求。

3、在8080端口上，使用ajax请求9999服务器接口，会被阻塞吗？

如果这件事发生在浏览器中，必然会被阻塞。如果发生非浏览器环境，比如node环境中，肯定不会被阻塞。

4、在8080端口上，使用JSONP请求9999服务器接口，会被阻塞吗？

肯定不会，因为JSONP不是ajax。哪怕这个行为发生在浏览器中，也不会被阻塞。

5、以浏览器环境为例，你有哪些解决跨域被CORS阻塞的方案呢？

（1）使用JSONP

因为JSONP不是ajax，同源策略管不了。但是JSONP只能解决GET请求的跨域问题。

（2）CORS

要求在后端服务器配置CORS的header字段，这种做法相当于把后端接口变成了开源接口。

（3）代理

在本地开发中，我们使用webpack做代理；在生产环境下，我们使用nginx做代理。

6、vue.config.js

javascript 复制代码

const { defineConfig } = require('@vue/cli-service')

// 这是@vue/cli这个脚手架指定的配置文件，它的背后是webpack
// 配置文件修改后，务必要重启
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    // 当vue项目中使用ajax发起请求时，如果请求路径中有/api，表示匹配成功
    // 背后的node服务就会将其代理到target远程服务器上
    proxy: {
      '/api': {
        target: 'http://localhost:9999',  // 是真实服务器地址
        changeOrigin: true
      }
    }
  }
})

7、为什么代理可以解决跨域问题

保证了ajax同域请求。