前端、后端、nginx解决跨域的方案

项目地址

• 前端：https://gitee.com/haitaoss/test_cross_vue
• 后端：https://gitee.com/haitaoss/test_cross

前端解决跨域

变动的文件1：config/index.js

proxyTable: {
   
      '/api': {
   
        target: 'http://localhost:8080',  // 目标服务器地址
        pathRewrite: {
   
          '^/api': ''   // 将api前缀除掉
        }
      }
    },

变动的文件2：src/App.vue

前端解决跨域的原理

总结：通过前端代理转发，不违反同源策略，所以浏览器不会进行跨域拦截

 /*
  场景:
    1. 前端 项目运行的端口：http://localhost:9090
    2. 后端 项目运行的端口：http://localhost:8080

    但我们访问http://localhost:9090/ 页面，点击按钮会发送ajax请求后端接口 http://localhost:8080/hello
      很明显由于浏览器的同源策略，这个请求会被浏览器拦截无法发送到后端 (注：在后端接口没有做跨域处理的情况下)


    解决办法：我们不直接访问后端接口，而是根据一定规则访问前端接口，前端在代替我们发送请求获取响应数据即可。这个就需要配置proxy了
       但我们访问http://localhost:9090/ 页面，点击按钮会发送ajax请求后端接口 http://localhost:8080/api/hello
        此时我们发送的请求不满足同源策略，能成功发送出去。
        然后请求来到了前端应用的服务器，服务器根据配置发现是一个代理请求，就会帮我们请求真实的接口再将数据返回。
          很明显啊，请求都已经到了前端应用服务器了，已经不过浏览器管了，那还会有什么跨域拦截的问题存在！！！
*/

后端解决跨域

• 变动的文件1：config/index.js