前端跨域如何解决？

什么是跨域？
跨域是通俗的说是从一个域名去请求另一个域名的资源。比如从www.baidu.com 页面去请求 www.taobao.com 的资源。
跨域严格一点来说：两个域名只要协议，域名，端口中只要有一个不同，就被成为跨域

浏览器为什么要限制跨域？
只有同域才可以拿到存在cookie中的信息，防止坏人随意拿到我们的信息去做坏事

在团队的配置中，我们为了减少前端对后端的依赖，提高开发效率，使前后端职责更清晰等等因素，我们不得不面对跨域的问题，那我们该怎么解决呢？

1、JSONP
原理：浏览器对script的资源引用没有同源限制，同时资源加载到页面后会立即执行，所以通过动态插入script标签即可达到跨域的请求
特点：数据为json格式
缺点：不能post

<script>
    // 回调函数
    function getJsonp(data) {
       console.log(data); 
    }
    let scriptObj = document.createElement('script');
    scriptObj.type = "text/javascript";
    scriptObj.src = "https://easy-mock.com/mock/5b9a1ff49746e0452c1a7354/example?callback=testjsonp";
    document.head.appendChild(scriptObj);
</script>

2、CORS
原理： cors(Cross-Origin Resource Sharing)是W3C CORS 工作草案，它定义了在跨域访问资源时浏览器和服务器之间如何通信。CORS背后的基本思想是使用自定义的HTTP头部允许浏览器和服务器相互了解对方，从而决定请求或响应成功与否
特点：是 JSONP 模式的现代版。支持更多的请求方式，XMLHttpRequest
缺点：需后端配合修改，现代浏览器支持cors，老浏览器依旧要用JSONP

caniuse-cors

Access-Control-Allow-Origin: <origin> | * // 需授权的域名
Access-Control-Allow-Credentials: true | false // 是否携带 Cookie，默认不携带
Access-Control-Allow-Methods: <method>[, <method>]* // 允许的请求方法
Access-Control-Allow-Headers: <field-name>[, <field-name>]* // 额外允许携带的请求头

res.writeHead(200, {
    "Content-Type": "text/html; charset=UTF-8",
    "Access-Control-Allow-Origin":'http://www.taobao.com',
    'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE，OPTIONS',
    'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type'
});

3、PROXY
原理：proxy代理用于将请求拦截，然后通过服务器来发送请求，然后再将请求的结果传递给前端

node通常用 node-http-proxy即可

proxy太通用了，weblack-dev-server里已集成，使用时直接配置即可webpack-dev-server proxy代理

module.exports = {
  entry: {
      app: [path.join(paths.src.client, 'index.js')],
      vendors: ['moment'], //需要打包的第三方插件
  },
  output: {
    path: paths.dist.client,
    filename: 'js/[name].js',
    chunkFilename: 'js/[name].js'
  },
  devServer: {
    proxy: {
       '/api': 'http://localhost:3000'，
       //默认不支持https，https需单独配置
       '/https_api': {
          target: 'https://other-server.example.com',
          secure: false
        }
    }
  }
};

前端跨域如何解决？

猜你喜欢