跨域问题的4种解决方案

跨域问题的4种解决方案如下：

1、浏览器插件

谷歌浏览器有一款允许跨域的插件 Allow CORS: Access-Control-Allow-Origin，可在web应用程序中轻松执行跨域Ajax请求。
插件默认处于非活动状态（工具栏图标为灰色C字母），激活需点击工具栏图标，图标变为橙色C字母即表示激活。
若无法访问谷歌商店，可在第三方网站下载该插件，离线安装到谷歌浏览器。

2、web服务器软件配置

以 Nginx 为盯型例，在配置文件中添加以下参数：

location / { add_header Access-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; }}

参数说明：
Access-Control-Allow-Origin *：允许所有域名跨域访问。
Access-Control-Allow-Methods：指定允许的HTTP方法（如GET、POST、OPTIONS）。
Access-Control-Allow-Headers：指定允许的请求头字段。
OPTIONS请求返回204状态码，用于预检请求的快速响应。

3、后端框架操作

以 PHP 为例，在文件开头添加以下代码：

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

参数说明：
Access-Control-Allow-Origin:*：允许所有域名跨域访问。
Access-Control-Allow-Methods：指定允许的HTTP方法。
Access-Control-Allow-Headers：指定允许的请求头字段（如x-requested-with用于识别Ajax请求）。
PhalApi框架：需按官方教程配置路由规则，例如将默认的?service=App.Usre.Login改为/App/User/Login形式访问。

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': '' } } }}

参数说明：
proxy：配置代理规则，将/api开头的请求转发到目标地址（如
http://blog.pangao.vip
）。
pathRewrite：重写路径，将凯空猜/api替换为空字符串。
修改.env.development文件：

VUE_APP_BASE_API = 'api'

使用方式：在代码中用api替代完整URL（如
http://blog.pangao.vip
），前亏塌端会自动通过代理访问目标地址。

您可能感兴趣问答

Collapsible

热门标签

热点问答