主页 > 官方博客 > 前端AJAX数据请求跨域处理

前端AJAX数据请求跨域处理

2020-09-14 19:11:25
2685
王开通

一、为什么要解决跨域问题？

在前端领域中，跨域是指浏览器允许向服务器发送跨域请求，从而克服Ajax只能同源使用的限制。

什么是同源策略？

同源策略是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

同源策略限制以下几种行为：

Cookie、LocalStorage 和 IndexDB 无法读取
DOM和JS对象无法获得
AJAX 请求不能发送

其实说简单点,跨域，指的就是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。

二、解决方案

1. 后端解决：

后台在请求头部添加注解，从而实现跨域。这也是最常用的解决跨域方法。

2. 前端解决：

（打铁还需自身用，后端不想给你解决或者是第三的接口，那就只能靠自己了），无论是jsonp, 还是cros 解决方案，也是需要后台配合的。可是木有后台，那么就只能靠自己了。

① nginx代理跨域（开发，部署）:

nginx代理跨域，实质和CORS跨域原理一样，通过配置文件设置请求响应头Access-Control-Allow-Origin…等字段。

1）nginx配置解决iconfont跨域

浏览器跨域访问js、css、img等常规静态资源被同源策略许可，但iconfont字体文件(eot|otf|ttf|woff|svg)例外，此时可在nginx的静态资源服务器中加入以下配置。

      location / {
        add_header Access-Control-Allow-Origin *;
      }

2）nginx反向代理接口跨域

跨域问题：同源策略仅是针对浏览器的安全策略。服务器端调用HTTP接口只是使用HTTP协议，不需要同源策略，也就不存在跨域问题。

实现思路：通过Nginx配置一个代理服务器域名与domain1相同，端口不同）做跳板机，反向代理访问domain2接口，并且可以顺便修改cookie中domain信息，方便当前域cookie写入，实现跨域访问。
#proxy服务器

      server {
     listen       8080;
     server_name  www.demo.com;
     location / {
        proxy_pass   http://www.demo.com:8080;  #反向代理
        proxy_cookie_domain www.demo.com www.demo1.com; #修改cookie里域名
        index  index.html index.htm;

        # 当用webpack-dev-server等中间件代理接口访问nignx时，此时无浏览器参与，故没有同源限制，下面的跨域配置可不启用
        add_header Access-Control-Allow-Origin http://www.demo1.com;  #当前端只跨域不带cookie时，可为*
        add_header Access-Control-Allow-Credentials true;
      }
      }

② nodeJS 中间件代理即webpack（开发环境）:

webpack项目通常在webpack.config.js中配置,在vuecli3 项目中，在vue.config.js 中配置

        proxyTable: {
           '/bread': {
           target: 'https://www.baidu.com/bread',
           changeOrigin: true,
           pathRewrite: {
             '^/bread': ''
           }
          }
       }

跨域是一个老生常谈的话题，网上也有大量跨域的资料，并且有不少精品(比如阮一峰前辈的)，但是身为一个前端人员不应该浅尝而止，故而才有了本文。漫漫前端路，望与诸君共勉之！