解决跨域的方法

跨域是如何产生的？

        出于浏览器的同源策略限制.同源策略是一种约定,它是浏览器最核心也是最基本的安全功能,如果缺少了同源策略,则浏览器的正常的功能可能会受到影响

        跨域是Web是构建在同源策略基础上的,浏览器只是针对同源策略的一种实现,同源策略会阻止一个域的JavaScript脚本和另一个域的内容进行交互,所谓同源(即指同一个域)就是两个页面具备同样的协议(protocol),主机(host)和端口号(port)

简单来说违背同源策略就会产生跨域。

        这里注意一下：Ajax默认遵循同源策略

如何解决跨域

        1.JSONP

                这是一种非官方的解决方法，由程序员开发出来，JSONP没有浏览器兼容问题，任何浏览器都支持。(优点)，但是只支持get请求（缺点），网页中有些标签天生就具备跨域能力，例如：img/link/script

• 原理

  • 客户端利用 script 标签的 src 属性，去请求一个接口，因为src属性不受跨域影响。

  • 服务端响应一个字符串

  • 客户端接收到字符串，然后把它当做JS代码运行

    2.CORS（跨域共享）

                CORS才是解决跨域的真正解决方案。 需要前后端配合实现
        前端需要做什么？
                无需做任何事情，正常发送Ajax请求即可。
        后端需要做什么？
                需要加 响应头 。或者使用第三方模块 cors 。

     3.使用代理服务器（最推荐使用）

                

 

步骤:

第一种方法

  1)在vue.config.js中配置devServer

  2)确保基地址指向本地服务

 devServer: {
    },
    proxy: {
      // 当前前端的项目服务器devServer,收到一个请求,并且请求地址以/api打头,就出触发代理机制
      // http://localhost:9588/api/login -> http://localhost:3000/api/login
      '/api': {
        target: 'http://localhost:3000' // 我们要代理的真实接口地址
      }
    }
   
  },

  优点：配置简单、请求资源时直接发给前端

  缺点：不能配置多个代理，不能灵活的控制请求是否走代理

第二种

在vue.config.js中配置具体代理规则：

module.exports = {
        devServer:{
            proxy:{
                '/login':{
                        //匹配所有以/login开头的请求
                        target:'' //代理目标的基础路径
                        changeOrigin:true //可以代理反向地址
                        pathRewrite：{}//重写路径
                }
        }
     }
}

优点：可以配置多个代理，灵活控制是否走代理