Vue中如何使用vue-resource获取端口数据

Vue中如何使用vue-resource获取端口数据

1.npm install vue-resource

2.methods 中添加方法用来获取数据

3.页面开始时调用该方法

  • created:function(){
    this.getRoute(),
    },

在我的项目中 方法这样就可以调用获取数据了

### 解决 CORS Policy Error 和 Preflight Request Failure 当从 `http://localhost:81` 向目标 URL (`http://10.193.107.225:8091/general/authorization/login`) 发送请求时,如果出现 **CORS policy error** 或者 **preflight request failure**,通常是因为服务器未能正确设置跨域资源共享 (CORS) 的响应头。以下是详细的分析和解决方案。 --- #### 1. 理解 CORS 政策及其影响 浏览器实施同源策略 (Same-Origin Policy),限制了一个源(协议、主机名、端口号相同)的网页如何与其他源交互。对于跨域请求,浏览器会自动附加 `Origin` 请求头,并期望服务器在响应中提供相应的 `Access-Control-Allow-Origin` 头部[^1]。如果没有这些头部或者它们不符合要求,则会发生 CORS 错误。 --- #### 2. 解决方案:调整服务器端配置 ##### (1)启用简单请求的支持 对于简单的 GET 或 POST 请求(无自定义头部),只需确保服务器返回以下响应头即可: ```plaintext Access-Control-Allow-Origin: * ``` 这表明允许任意来源访问资源。如果仅希望特定来源能够访问,则应指定确切的来源地址而非通配符: ```plaintext Access-Control-Allow-Origin: http://localhost:81 ``` 注意:上述方法适用于不需要身份验证或复杂操作的情况;但对于涉及敏感数据的操作,推荐使用更严格的控制机制。 --- ##### (2)处理预检请求 (Preflight Requests) 针对带有自定义 HTTP 方法(如 PUT、DELETE)、非标准 MIME 类型或其他特殊需求的请求,浏览器会在正式发起实际请求之前先发送一个 OPTIONS 请求作为预检查询。此时需额外配置如下几个关键参数[^2]: - **Allow Methods**: 明确列出哪些 HTTP 动词被许可执行。 - **Allow Headers**: 列举客户端可能附带的所有非默认头部项。 - **Max Age Cache Duration**: 可选字段用于告知缓存时间长度减少重复询问频率。 示例 Nginx 配置片段展示如下: ```nginx location /general/authorization/login { if ($request_method = 'OPTIONS') { add_header Access-Control-Allow-Origin "*"; add_header Access-Control-Allow-Methods "GET, POST, OPTIONS, DELETE, PUT, PATCH"; add_header Access-Control-Allow-Headers "Authorization, Content-Type, Accept-Language"; # 返回空体状态码代表成功完成选项检测流程 return 204; } # 对于其他类型的常规请求同样加入对应跨域声明 add_header Access-Control-Allow-Origin "*"; add_header Access-Control-Allow-Credentials true; proxy_pass http://backend_service_url; } ``` 此处特别强调了对 OPTION 请求单独处理的重要性以及适当扩展可接受的方法列表范围。 --- #### 3. 实现基于框架的具体修改实例 假如后台采用 Spring Boot 构建而成的话,那么可以通过全局过滤器形式实现自动化注入所需头部信息功能。下面给出了一段 Java 示例代码帮助理解具体实践方式: ```java import org.springframework.stereotype.Component; import javax.servlet.FilterChain; import javax.servlet.ServletException; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; @Component public class CorsFilter implements org.springframework.web.filter.OncePerRequestFilter { @Override public void doFilterInternal(HttpServletRequest req, HttpServletResponse res, FilterChain chain) throws IOException, ServletException { String originHeader = req.getHeader("Origin"); if ("OPTIONS".equalsIgnoreCase(req.getMethod()) && originHeader != null){ // Respond directly to OPTIONS method res.setHeader("Access-Control-Allow-Origin", originHeader); res.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE"); res.setHeader("Access-Control-Max-Age", "3600"); res.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization"); res.setStatus(HttpServletResponse.SC_OK); }else{ // Set actual headers for real requests res.setHeader("Access-Control-Allow-Origin", originHeader); res.setHeader("Access-Control-Allow-Credentials", "true"); chain.doFilter(req,res); } } } ``` 以上实现了动态读取当前请求携带过来的实际 Origin 地址并将其反馈回去从而满足个性化定制化场景下的灵活适配能力。 --- #### 4. 测试与验证改动效果 最后一步非常重要——即确认所做的全部变更确实生效并无遗漏之处。可以借助 Postman 工具手动构造包含各种条件组合情况下去观察最终得到的结果是否符合预期设定值。另外也可以利用 Chrome DevTools Network Panel 查看整个通信链路里边各个阶段所交换的数据包详情进而深入排查潜在隐患所在位置。 --- ### 总结 通过合理调整 Web Server 层面的相关属性或是引入专门设计好的中间件组件都可以有效缓解乃至彻底消除因违反 Cross-Origin Resource Sharing Policies 所引发的一系列连锁反应现象的发生几率。与此同时也要记得定期复查现有架构是否存在新的风险敞口以便及时修补加固防线结构体系。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值