问题：什么是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' // 获取数据的函数
})

案例：