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

洪七公 · 发表于 2022-7-17 17:31:22

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

一、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  步骤演示

		自动登录	找回密码
密码			会员注册

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