前端解决跨域问题的三种方法(点击图片看大图)

洪七公

某位博主提供的方案，摘抄一下方便后续的自己研究，吐槽一下：程序猿真不是好当的，只能慢慢的学习慢慢的实践！

一、cors

后端程序员提供的解决跨域访问的方法，和前端程序员没有关系，定义后端程序代码 让 所有的前端程序都可以访问后端的数据，后端程序告诉服务器这个后端程序的数据任何前端请求都可以访问，服务器就不再执行跨域访问拦截数据的操作。

因为博主目前主攻前端对后端并不熟悉，因此这种方法暂不详细解答。

二、服务器代理 proxy

2.1  步骤

（1）修改 Nginx或者 Apache 服务器文件，目前博主使用的是Nginx代理

（2）在配置文件中的 server{ }中，一般是在最先方定义服务器代理

location /php1 {

    proxy_pass 'http://localhost/bk_2123/week6_day01/04_proxy/demo.php' ;

}

location    服务器代理关键词

/php1       服务器代理名称

proxy_pass  设定服务器代理的跨域url地址

'http://localhost/bk_2123/week6_day01/04_proxy/demo.php'    跨域地址

;           必须使用分号结束

设定好之后 一定要重启服务器

（3）在ajax函数中设定url请求地址

2.2  步骤展示

（1）修改nginx服务器文件

（2）在ajax函数中设定url请求地址

三、jsonp

3.1  核心原理

通过script标签属性scr属性来导入跨域的请求，没有使用Ajax技术，script标签src导入的外部文件，文件中的内容，都会按照JavaScript程序来执行，在后端程序中调用前端定义的函数程序，后端程序调用前端函数时输入后端操作数据获取的数据结果 作为实参。

3.2  步骤

（1）定义js程序定义变量定义函数，函数必须有一个形参存储后端程序输入的实参数据，函数程序的内容是操作这个形参也就是操作后端返回的程序。

（2）定义一个script标签，标签src属性的属性值是 跨域请求的url地址，同时携带参数数据 有一个参数一定是 调用函数的函数名称。

3.3  步骤演示