关于上篇ajax请求连接服务器中的url，这里需要注意的是这里的url使用的是相对路径，如果把它改为

“https://www.baidu.com/”，再运行，肯定出错。在chrome浏览器控制台中也可以看到错误信息。

浏览器跨域的Origin会受到nginx的影响吗_Access

错误信息总结为：浏览器跨域问题。

这是因为浏览器的同源策略导致的。默认情况下，javascript在发送AJAX请求时，url的域名必须跟当前页面的域名是完全一致的。

完全一致的意思就是，域名要相同（www.example.com和example.com不同），协议要相同（http和https不同），端口号要相同（默认是:80端口，它和:8080就不同）。

那是不是用javascript就不能请求其他网站（外域）的url了呢？答案是否！

有以下几种方法可以解决浏览器的跨域问题：

1、通过Flash插件发送HTTP请求，这种方式可以绕过浏览器的安全限制，但必须安装Flash，并且跟Flash交互。不过Flash用起来麻烦，而且现在用得也越来越少了。该方法不推荐，因为flash正在被淘汰。

2、 通过在同源域名下架设一个代理服务器来转发，JavaScript负责把请求发送到代理服务器：

'/proxy?url=http://www.sina.com.cn'

3、使用ajax的jsonp

前端代码：

浏览器跨域的Origin会受到nginx的影响吗_json_02

服务器端代码：

浏览器跨域的Origin会受到nginx的影响吗_json_03

该方式的缺点是：请求方式只能是get方式

4、使用jQuery 的jsonp插件

插件下载地址：https://github.com/jaubourg/jquery-jsonp

前端代码：

浏览器跨域的Origin会受到nginx的影响吗_json_04

服务器端代码：

浏览器跨域的Origin会受到nginx的影响吗_json_05

    

该方式的特点是：与上一方式相比，该请求方式不只局限于get请求，还可以是post请求，但从服务器从获取的数据依然是jsonp格式

5、使用cors

如果浏览器支持HTML5，那么就可以一劳永逸地使用新的跨域策略：CORS了。

CORS全称Cross-Origin Resource Sharing，是HTML5规范定义的如何跨域访问资源。

使用该方式的特点：与前两种方式相比，前端代码和未处理跨域前一样，即普通的ajax请求，但服务器代码添加了一段解决跨域的代码
    

// 设置：Access-Control-Allow-Origin头，处理Session问题
        response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("P3P", "CP=CAO PSA OUR");
        if (request.getHeader("Access-Control-Request-Method") != null && "OPTIONS".equals(request.getMethod())) {
            response.addHeader("Access-Control-Allow-Methods", "POST,GET,TRACE,OPTIONS");
            response.addHeader("Access-Control-Allow-Headers", "Content-Type,Origin,Accept");
            response.addHeader("Access-Control-Max-Age", "120");
        }