前端跨域

前言

前端跨域是一件非常常见的事情，如何解决跨域问题，是每一个前端程序员都要掌握的基本知识，下面我就和大家聊一聊前端跨域以及解决方法

同源策略

同源策略是执行在浏览器上的一个重要的安全策略，它用于限制非同源的文档或脚本进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。

那什么是同源策略？

同源指的是相同的IP地址、相同的端口号、相同的协议，如果他们三个有一个不同，那么就是非同源也就是跨域，浏览器就无法访问

前端解决跨域的几种方式

在这里给大家介绍几种前端常用的解决跨域的方式

1. JSONP

（1）基本原理：

web页面在调用script标签时是不受同源策略的限制的、如果把接口写在script标签的src属性里，再用一个callback回调函数来接受参数，那么就可以实现前端跨域了

（2）直接上代码

// 获取dom
var app = document.getElementById("app")
// 创建标签
var script = document.createElement("script")
// 设置src属性
script.src = "http://*********?callback=showData"
app.appendChild(script)
// 处理数据
showData(obj){
 // obj就是返回的数据
}
// 删除标签
app.removechild(script)

（3）jquery实现JSONP调用

 $.ajax({
   url: "http://********",
   dataType: "jsonp",
   success: function( response ) {
     if(response === 'success'){
       amount.innerText = amount.innerText - 1
     }
   }
 })

2. webpack代理

(1) 如果是在webpack项目中，一般都会使用webpack代理，利用webpack请求数据不跨域，本地浏览器请求本地webpack也不跨域，这样就解决了跨域的问题。

配置如下：

  module.exports = {
    dev: {
      // Paths
      assetsSubDirectory: 'static',
      assetsPublicPath: '/',
      proxyTable: {
        '/api': {
          target: 'https://*****.xxxxxxxx.com', // 源
          pathRewrite: {'^/api': '/api'}, // 重写方法
          changeOrigin: true,     // 是否跨域，
          secure: false,          // 设置支持https协议的代理
        }
      },
      ...
  }

总结

前端跨域有很多种方法，在这里我就给大家介绍了最最常用的两种方法，如果大家想了解其他的跨域方法可以给我留言，到时候我会继续更新。