问题:什么是JS的同源策略和跨域问题?
请求的跨域问题真的不是 浏览器不同 引起的!!!
同源策略:
所谓同源策略,指的是浏览器对不同源的脚本或者文本的访问方式进行的限制。比如源a的js不能读取或设置引入的源b的元素属性。
同源指两个页面具有相同的协议,主机(也常说域名),端口,三个要素缺一不可。
![5b1ade9e2369440a72c00c5e7fc717da.png](https://i-blog.csdnimg.cn/blog_migrate/2d415770064c98a5fcfa7805cfab5c63.jpeg)
同源策略限制的不同源之间的交互主要针对的是 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