跨域问题的4种解决方案

序言

不可思议，我竟然被布吕马难题煎熬了半天。坚信许多开发人员都碰到过布吕马难题，总之，软件系统也有许多种不同。但我那时试著了若干种配套措施，依然没化解。直至最终我小柔给了我个提示信息，会不能布吕马难题而已虚无，或者说的bug在其它地方性。而后，历经我细细摸查，总算辨认出原本是PhalApi架构中的两个小难题，引起了布吕马收起（variations反正PhalApi架构中的难题是啥）。那我也借那个良机，来和大伙儿谈谈啥是布吕马难题，和有什么样常用的软件系统。

甚么是布吕马

甚么是欢乐地球，呸，甚么是布吕马呢？

单纯来说，布吕马是指从两个搜索引擎的页面去允诺另两个搜索引擎的天然资源。比如说从腾讯(baidu.com)页面去允诺我的网志(blog.pangao.vip)的天然资源。但虽然有相混思路的亲密关系，通常是不容许那么间接出访的。

甚么是相混思路

一言蔽之，相混是协定、搜索引擎和路由器都完全相同。

为甚么要有相混思路

换言之，假如你才刚在信用卡输出帐号密码，查阅了他们除了1万多块钱，紧接著

为甚么要布吕马

不过，有许多情况下，他们是须要布吕马出访的。

布吕马难题的4种软件系统

1、应用程序应用程序

Google浏览器有这款容许布吕马的应用程序Allow CORS: Access-Control-Allow-Origin。这款应用程序可以在web应用程序中轻松执行布吕马Ajax允诺。请注意，将加载项添加到应用程序时，默认情况下它处于非活动状态（工具栏图标为灰色C字母）。假如要激活加载项，请按一下工具栏上的图标。图标将变为橙色C字母。

假如你没梯子，Google打不开，那么请试试那个Allow CORS: Access-Control-Allow-Origin Chrome应用程序,Allow CORS: Access-Control-Allow-Origin Google应用程序应用程序下载_安装_教程-扩展迷。在第三方网站下载应用程序，然后离线安装到Google应用程序。

2、web服务器软件

以 Nginx 为例，只须要在Nginx的配置文件中配置以下参数：

location / { add_headerAccess-Control-Allow-Origin *;add_header Access-Control-Allow-Methods GET, POST, OPTIONS; add_header Access-Control-Allow-Headers DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization; if ($request_method = OPTIONS) { return 204; } }

3、后端架构操作

以 PHP 为例，只须要在文件开头添加如下代码即可：

header(Access-Control-Allow-Origin:*); header(Access-Control-Allow-Methods:OPTIONS, GET, POST); header(Access-Control-Allow-Headers:x-requested-with);

虽然我使用的是 PhalApi(派架构) – PHP轻量级开源接口架构 – 接口，从单纯开始！，按照那个教程操作，就可以很容易的化解布吕马难题。

image

4、前端架构操作

以 Vue 为例，修改 vue.config.js 文件如下：

devServer: { open: true, host: localhost, port: 8080, overlay: { warnings: false, errors: true }, proxy: { /api: { target: http://blog.pangao.vip, ws: true, changOrigin: true, pathRewrite: { ^/api: } } } }

在须要用到 http://blog.pangao.vip 的地方性，均用 api 替代，比如说修改 .env.development 文件如下：

VUE_APP_BASE_API = api