ajax跨域问题及相关解决方案

1 什么是跨域

所谓的跨域是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。

所谓同源是指，域名，协议，端口均相同；

2 什么时候会存在跨域的问题

页面访问不同源的脚本接口数据等，如我们平时前端页面先后台发起的请求时就会造成跨域的问题，跨域问题是针对xhr请求的

3 Ajax 无论原生还是jquery的$.ajax或angular的$http等都是利用XMLHttpRequest（下简称XHR）对象，就一定存在跨域的问题

Ajax：“Asynchronous JavaScript and XML”，翻译过来就是异步JavaScript和XML。

Ajax是一种用于创建快速动态网页的技术，通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。

意味这可以再不重新加载整个网页的情况下，对网页的某部分进行更新。

4如何解决跨域的问题

方案一 ：利用ajax自身带的jsonp请求

方案二：利用node做js 和 后台 的中间层 利用node无跨越限制将接口数据从后台请求来，在利用js的ajax同源调用自己的node接口，这样就解决了跨域的问题；此处代码不详细介绍了；

方案三：利用nginx，不仅可以做静态服务器，还可以通过请求代理解决跨域的问题；

       #nginx 配置
       #项目页面
        location /appliance{
            alias   /work/项目文件名/dist;
            autoindex on;
            #一般dist下面存在index.html文件，否则不用上面的而用下面的
            index   name.html;
        }
        #项目接口
        location /interfaceName/{
           proxy_pass  http://域名/interfaceName/;
          #或者用下面的本机ip进行与后台的本地调试
          #  proxy_pass http://本机IP地址/interfaceName/;
        }

 方法四：

利用webpak dev-server设置代理，在webpack.dev.config.js 文件配置如下：

devServer: {
            '/yourInterface/': {
              target: "http://域名等/yourInterface/",
              pathRewrite: {'^/yourInterface/':''},
              changeOrigin: true,
              secure: false
            }
        }
    }