浏览器跨域问题

 

什么是跨域？

  跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。源指协议，端口，域名。只要这3个中有一个不同就是跨域。为什么会有跨域？因为浏览器的同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。通俗来讲就a.com不能调用b.com里面的内容，因为域不一样，所以就有了跨域。

怎么判断跨域了？

那我们在日常开发工作中，怎么去知道是否是跨域呢？例如：在ionic2里使用angular2的HTTP请求api时，如果在浏览器里运行，经常会遇到跨域问题，比如：

XMLHttpRequest cannot load http://www.xxx.com/clt/jsp/v3/channelContList.jsp?n=25950&WD-UUID=864819028898243&pageidx=1. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8101' is therefore not allowed access.

 

这是因为chrome不允许跨域访问。

如何避免跨域：

那么如何才能避免或者解决跨域的问题，跨域是浏览器禁止的，服务端并不禁止跨域，上面我们了解到跨域是因为源不同的原因造成的，那么我们可以做一个服务端代理，浏览器可以发给自己的服务端，然后由这个服务端再转发给要跨域的服务端。

proxy：

在我们现在的正常工作中在生成一个项目时，vue脚手架生成的项目config目录下面有个index文件，在那里我们可以设置项目代理，大致如下：

proxy: {
      '/api': {
        target: 'http://116.62.197.143:7300/mock/5cb06216073464286976ddfa/getaway', // 需要请求的后端地址
        ws: true,
        changeOrigin: true, // 是否允许跨域
        pathRewrite: { // 重写 即 代替target后面的地址，然后我们在调接口的时候直接使用api代替
          '^/api': '/'
        }
      }
    }

然后统一直接基础路径为api，后面接上其他接口的路径信息就可以使用。这是我们开发中常用的方法，支持开发环境和生产环境中使用。

axios.defaults.baseURL = '/api'

因为在你运行项目的时候，会配置启动一个node服务，这个服务的作用是：1、静态文件服务，让你可以访问到html/js等文件包括监听文件变动等，2、启动一个http代理，你js发送的请求会请求到这个服务A，由服务A转发到服务B，而服务A和静态文件服务器是同源的，并不影响同源策略

Nginx：

上面是开发环境下，那上线后呢，自然也是由服务端的大佬可以搞定，从“源”头上解决问题，在部署静态资源的时候加上以下配置，大致格式如下：

后端程序代理：

还有就是我们自己启一个后端程序服务a做代理，然后把所有的请求转发到服务器。这里要用到node的一个包http-proxy-middleware。关键代码(express)如下：了解即可

var proxy = require('http-proxy-middleware');
var app = express();
app.use('/api', proxy({
target: "http://baidu.com:7071/",
changeOrigin: true
}));

谷歌浏览器设置：

上面的方法都是需要代码才能去实现，下面的这个方法不用代码就可以实现，只用设置下我们的谷歌浏览器（前提：开发时用的Chrome）就可以了。

分为Mac 和 Windows 两种，大家各自根据自己使用的机器对应到位：

MAC 设置：

（1）、在文档中随意位置新建文件夹MyChromeData（文件夹名字随意，主要用来存放谷歌用户信息）

（2）、终端输入：

open -n /Applications/Google\ Chrome.app/ --args --disable-web-security  --user-data-dir=/Users/imac/Documents/MyChromeUserData

红色字体部分是刚才新建文件夹的路径。

Windows设置:

直接创建chrome浏览器的快捷方式，在属性中找到打开路径

在...chrome.exe后面加上...chrome.exe --args --disable-web-security --user-data-dir

例如：

• "C:\Program Files\Google\Chrome\Application\chrome.exe" --args --disable-web-security --user-data-dir

在原有值后面新增红色字符

• 如果window系统按照上面的设置不可以的话可以按照Mac的设置方法来试试:

（1）.在电脑上新建一个目录，例如：C:\MyChromeDevUserData

（2）.在属性页面中的目标输入框里加上   --disable-web-security --user-data-dir=C:\MyChromeDevUserData，--user-data-dir的值就是刚才新建的目录。

（3）.点击应用和确定后关闭属性页面，并打开chrome浏览器。

提示：再次打开chrome，发现有“--disable-web-security”相关的提示，说明chrome又能正常跨域工作了。