web — 跨域问题及解决方案

web — 跨域问题及解决方案

一、概念

1. 跨域：

   当一个请求 url 的协议、域名、端口三者之间任意一个与当前页面 url 不同即为跨域。
   

2. 同源策略：

   • 同源指：协议、域名、端口三者相同

   • 浏览器最核心最基本的安全功能，缺少了同源策略，浏览器容易受到 XSS、CSFR等攻击。

3. HTML 特殊标签：

   <link> <script> <img> <frame> 等这些标签具有跨域特性，可以直接访问。
   

二、解决方案

1. Jsonp

• 原理：

  前端通过 <script> 请求后端接口，后端返回方法的执行：
  如：前端定义好 test()方法，请求后端返回 test()，给前端进行执行
  

• 实现：
  

2. CORS（服务器端解决）

• 原理：
  

3. Proxy 代理

• 原理：

  通过中间件来实现，浏览器有跨域限制，但服务器没有跨域限制，所以中间件就是服务器（服务器对数据进行了转发而已）。
  

• 实现：

  vue项目：

  开发环境时候使用，生成环境使用nginx

  // vue.config.js
  module.exports = {
    devServer: {
      port: 3000,
      proxy: {
        '/jeecg-boot': {
          target: 'http://localhost:8080', //请求本地 需要jeecg-boot后台项目
          ws: false,
          changeOrigin: true              // 跨域
        },
      }
    },
  
    lintOnSave: undefined
  }
  

4. nginx（反向代理）

5. WebSocket

6. postMessage