前端离谱跨域前端离谱跨域

Question

一个网站的登录页面：/login，请求了一个接口https://aa.bb.cn/api/interface/LoginMethod;
OK,可以正常请求；
进入页面：/Admin/WelCome 请求了一个接口https://aa.bb.cn/api/interface/MaxIndex;
跨域了！！
两个接口都是post请求，并且直接在浏览器访问这个地址也可以正常提示：请求的资源不支持 http 方法“GET”

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

看起来你遇到的问题是关于前端跨域访问的问题。跨域访问是指网页在不同域之间进行访问时遇到的问题。为了解决安全性问题，浏览器对跨域访问有严格的限制，阻止了不同源（协议、域名或端口不同）的网页间的通信。这种情况常见于开发过程中，特别是前后端分离的情况下。

跨域问题可能有多种原因，这里列举一些可能的解决方案和排查步骤：

排查步骤

1. 检查后端配置：首先确认后端是否设置了允许跨域访问的响应头（CORS）。通常后端需要在响应头中包含如 Access-Control-Allow-Origin 等字段来允许跨域请求。

例如，在Express（Node.js）中设置CORS的示例代码：

const cors = require('cors');
app.use(cors()); // 允许所有来源的跨域请求

或者使用具体来源：

app.use(cors({
  origin: 'https://your-front-end-domain.com' // 允许特定前端的跨域请求
}));

请确保后端开发者设置了正确的CORS策略。

1. 检查前端代码：确认前端在发起请求时是否带有正确的请求头信息。例如，如果后端要求特定的请求头信息（如自定义token等），确保前端请求时包含了这些头信息。
2. 使用代理：如果你在本地开发时遇到跨域问题，可以考虑使用代理服务器来解决。例如，使用http-proxy-middleware来代理请求到后端服务器。这样可以避免浏览器的同源策略限制。
3. 查看浏览器控制台和网络日志：在浏览器控制台中查看可能的错误信息和网络请求的详细信息，这有助于定位问题所在。例如，检查请求的响应头是否包含正确的CORS信息。
4. 检查域名和端口：确认前后端是否在同一个域名或子域名下，或者是同一个端口上运行。不同域名或端口之间默认会有跨域问题。如果确实需要跨域访问，确保后端设置了正确的CORS策略。

解决方案

根据上述排查步骤的结果，采取相应的解决方案。如果后端没有设置CORS策略，需要与后端开发者沟通并修改配置。如果前端请求头有问题，调整前端代码以匹配后端要求。如果是本地开发环境的问题，考虑使用代理服务器来解决跨域问题。总之，需要根据具体情况采取相应的措施来解决跨域问题。