JS的同源策略和跨域问题,如何解决跨域问题_面试中一定遇到!

问题:什么是JS的同源策略和跨域问题?

请求的跨域问题真的不是 浏览器不同 引起的!!!

同源策略:

所谓同源策略,指的是浏览器对不同源的脚本或者文本的访问方式进行的限制。比如源a的js不能读取或设置引入的源b的元素属性。

同源指两个页面具有相同的协议,主机(也常说域名),端口,三个要素缺一不可。

同源策略限制的不同源之间的交互主要针对的是 js中的XMLHttpRequest等请求,下面这些情况是完全不受同源策略限制的。

1、页面中的链接,重定向以及表单提交是不会受到同源策略限制的。

2、跨域资源嵌入是允许的,当然,浏览器限制了Javascript不能读写加载的内容。

跨域问题:

即我们需要向不同源的 后台接口 发送 http请求去请求数据。

vue-cli开发环境开发的时候一定会涉及到跨域问题。

因为vue-cli开发环境启动本地一个 localhost:端口号 node服务器,此时去请求数据接口一定是跨域的。

如何解决跨域问题?

1、 vue-cli项目中通过node.js代理服务器来实现跨域请求

2、在服务器响应客户端的时候,带上 Access-Control-Allow-Origin: * 头信息 [推荐使用]

3、通过 jquery 的 jsonp 形式解决跨域问题

详解:

1、在vue-cli项目中的 config 文件夹下的 index.js 配置文件中,配置 dev对象的 proxyTable对象,可通过node.js的代理服务器来实现跨域请求。

dev: { env: require(./dev.env), port: 8080, autoOpenBrowser: true, assetsSubDirectory: static, assetsPublicPath: /, proxyTable: { }, cssSourceMap: false }

但是这种解决方案,仅适用于 vue-cli 开发环境 解决跨域问题,生产环境如果涉及到跨域问题,并未解决。

2、以 java 代码为例,设置 http 请求的响应头,推荐使用:

public class testFilter implements Filter { public void doFilter(ServletRequest request, ServletResponse resp, FilterChain chain) throws IOException, ServletException { HttpServletResponse response = (HttpServletResponse) resp; response.setHeader("Access-Control-Allow-Origin", "*"); // 解决跨域访问报错 response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE"); response.setHeader("Access-Control-Max-Age", "3600"); // 设置过期时间 response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, client_id, uuid, Authorization"); response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // 支持HTTP 1.1. response.setHeader("Pragma", "no-cache"); // 支持HTTP 1.0. response.setHeader("Expires", "0"); chain.doFilter(req, res); }

3、jQuery设置ajax请求跨域:

$.ajax({ url:...../data.js, // 可以不是本地域名 type:get, dataType:jsonp, // jsonp格式访问 jsonpCallback:aa // 获取数据的函数 })

案例: