跨域访问问题

前 后 端 分 别 使 ⽤ 不 同 的 服 务 器 部 署 代 码 时 会 涉 及 跨 域 访 问，跨域访问规则出于同源策略 也就是使⽤异步请求访问数据时 要求请求⽅与响应⽅地址为同源。

跨域访问产⽣：

        http://    localhost :      8080 /day12/getArea

        协议       地址               端⼝ 有⼀个不⼀样 都算跨域请求

跨域请求检测：

        跨域请求是否产⽣由浏览器⾃动检测

         浏览器访问⽬标站点数据时会⾃动发送method="options"的请求 作为域检请求 检查此次请求是否 数据跨域访问

解决⽅案：

        CORS policy 跨域资源共享 CORS是⼀个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。 它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从⽽克服了AJAX只能同源使⽤的限制，是 对ajax请求的限制，cors对静态资源没有跨域限制。 CORS要求 出现跨域ajax请求时 浏览器会检查服务端是否有 Access-Control-Allow-Origin 响应头 如果有 则允许此次跨域访问

出现跨域请求时浏览器控制台报错信息

        如果出现跨域请求 浏览器会阻⽌此次数据 Access to XMLHttpRequest at 'http://localhost:8080/day12/getArea' from origin 'http://127.0.0.1:8848' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resourc e.

如果想让浏览器允许跨域请求 需要在被访问的服务端设置允许跨域访问的响应头

浏览器会⾃动发送域检请求 method=options
检测请求是否出⾃同源 是否有 Access-Control-Allow-Origin 响应头
如果设置了指定的域 可以跨域访问 浏览器允许此次跨域访问
 /* 允许跨域的主机地址 */
 resp.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:8848"
);//这⾥设置请求的来源地址
 /* 允许跨域的请求⽅法GET, POST, HEAD 等 */
 resp.setHeader("Access-Control-Allow-Methods", "*");
 /* 重新预检验跨域的缓存时间 (s) */
 resp.setHeader("Access-Control-Max-Age", "3600");
 /* 允许跨域的请求头 */
 resp.setHeader("Access-Control-Allow-Headers", "*");
 /* 是否携带cookie */
 resp.setHeader("Access-Control-Allow-Credentials", "true");