前端面试题，解决跨域的方法--实际项目中的做法

前端面试必问题：解决跨域

方法1：

jsonp 这里就不过多解释本质就是利用<script>标签不涉及同源策略的特性，这种方法体现了程序员的聪明才智，因为这不是官方给出的解决跨域的方法

方法2：

本地开发时配置vue.config.js文件中的proxy

devServer: {
    host: '0.0.0.0',
    port: port,
    open: true,
    proxy: {
      "/api": {
        target: 'http://localhost/6204',
        changeOrigin: true,
        pathRewrite: {
          ['^/api']: ''
        }
      }
    },
    disableHostCheck: true
  },

原理:首先浏览器是禁止跨域的，但是服务端不禁止，在本地运行 npm run dev 等命令时实际上是用 node 运行了一个服务器，因此 proxyTable 实际上是将请求发给自己的服务器，再由服务器转发给后台服务器，做了一层代理。vue的proxyTable用的是http-proxy-middleware中间件, 因此不会出现跨域问题。

方法3：

3.1暴力解决跨域

在服务端加上header，允许所有域名来访问

3.2在服务端加上header，并且在第二个参数写上允许什么域名或者端口号或者协议跨域，允许8081端口访问

方法5：原理与方法3本质上一致都是在响应头中添加Access-Control-Allow-Origin字段

在我们公司实际的解决方案是在Java的代码中添加一下这一行,意思是到阿波罗里找到允许跨域的域名

config.setAllowedOrigins(Arrays.asList(adminApolloConfig.getCorsAllowedOrigins().split(regex:","))

阿波罗里的配置如下：

nat.cors.allowed.origins = https://nat15-institution-nat.soundai.net