关于前端跨域访问图片跨域问题

跨域确实是个很烦的问题，看到一篇不错的文章记录一下~~

lyk_dtf

4254人浏览 · 2022-07-13 10:44:19

lyk_dtf · 2022-07-13 10:44:19 发布

跨域确实是个很烦的问题，看到一篇不错的文章记录一下~~
前言：

最主要的是至今没搞懂
有些前端可以直接用微信头像路径，显示头像
有些前端就不可以，说跨域，然后让我把微信头像保存到服务器上返回他一个服务器路径给他……
难道跨域看项目或者看人？

基础概念

同源策略：同一协议，同一域名，同一端口号。只要不满足三者其中一种都是属于跨域问题。

axios和ajax及fetch说明

jQuery(ajax), fetch, axios三种前端异步请求的方法, 为了在当前页面下, 异步返回资源.

这三个其实都是用来请求数据的，那他们的区别在哪里呢？其实 axios 和 ajax都是对XMLHttpRequest这个对象的封装；而fetch则是window下的一个方法，是一个更底层的方法。

异步请求资源时, 大体可以使用ajax, fetch, axios三种方法.

如今, 很多项目的部署都是通过微服务来部署的. 图片类似的大文件, 为了提高访问的速度, 一般会放在一个单独的微服务下. 比如京东的对象管理系统. (我个人认为, 微服务之间的跨域问题, 因该使用nginx代理更合理, 因为这样可以减少代码上的依赖)

所以, 当我们想要异步请求资源的时候, 有时候会碰到跨域问题. 这时, 我们有三种解决方法.

跨域问题解决方法

1、 response header解决方法
在服务器端的响应头加入使用 Origin 和 Access-Control-Allow-Origin 就能完成最简单的访问控制. * 就是任何都可以访问. 我们使用检查来看百度图片时, 就可以看到访问时Network的Headers里, Response Headers的Access-Control-Allow-Origin* , 这里相当于是任何域都可以访问的意思.

我记得我在学校学.core的时候就是用的这种方法，.net站好像可以改webconfig实现

2、 jsonp解决方法
JSONP是一种非正式传输协议，该协议的一个要点就是允许用户传递一个callback(或者一开始就定义一个回调方法)参数给服务端，然后服务端返回数据时会将这个callback 参数作为函数名来包裹住 JSON 数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

注意, 我们通过href src所请求下来的, js脚本, css文件, 或者image图片文件, 视频文件, 都不存在跨域问题. 只有通过ajax请求才存在跨域问题.

所以我们又发现，Web页面上调用js文件时则不受是否跨域的影响（不仅如此，我们还发现凡是拥有src这个属性的标签都拥有跨域的能力，比如

为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

总结原生JS实现JSONP的步骤

1 客户端

定义获取数据后调用的回调函数
动态生成对服务端JS进行引用的代码
设置url为提供jsonp服务的url地址，并在该url中设置相关callback参数
创建script标签，并设置其src属性
把script标签加入head，此时调用开始。
2 服务端

将客户端发送的callback参数作为函数名来包裹住JSON数据，返回数据至客户端。

JSONP在jQuery中的具体实现

在jQuery中实现JSONP主要有两种方式。

$.getJSON
$.ajax
AJAX与JSONP的异同：

AJAX和JSONP这两种技术在调用方式上“看起来”很像，目的也一样，都是请求一个url，然后把服务器返回的数据进行处理，因此jQuery和extjs等框架都把JSONP作为AJAX的一种形式进行了封装；
但AJAX和JSONP其实本质上是不同的东西。AJAX的核心是通过XmlHttpRequest获取非本页内容，而JSONP的核心则是动态添加

我理解, js, css获取不需要设计跨域问题, 所以在src中添加函数方法, 用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。