java 跨域_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