项目访问的端口是8018,但是真实接口地址是19080,导致访问这个地址http://9.6.237.104:8018/esb/microService/queryCurrentThirdDataInfo 是跨域的,应该怎么解决呀
这个问题是由于您的前端页面与后端应用程序的接口地址不在同一个域名下所引起的跨域请求。在浏览器中,出于安全考虑,通常不允许 JavaScript 从一个域名下访问另一个不同域名下的资源,这种行为被称为跨域请求(Cross-Origin Resource Sharing, CORS)。
有一些方法可以解决跨域问题,下面是其中的几种方法:
使用代理
您可以使用反向代理服务器将前端应用和后端应用合并到同一域名下,然后使用代理来访问后端应用程序。通过这种方法,所有的请求将发送到同一域名下,从而避免了跨域问题。
例如,您可以使用 Nginx 反向代理服务器将请求转发到后端应用程序的地址,如下所示:
location /esb {
proxy_pass http://9.6.237.104:19080;
}
在上面的例子中,当前端应用发送请求到 /esb 目录时,Nginx 将请求转发到 http://9.6.237.104:19080 上,这样就可以避免跨域问题。
修改后端应用程序
如果您有权限修改后端应用程序的代码,可以在 API 接口中设置 Access-Control-Allow-Origin 头,来允许特定的跨域访问。
例如,您可以在后端应用程序中设置以下代码:
app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', 'http://9.6.237.104:8018');
// 其他设置
next();
});
在上面的例子中,我们设置了 Access-Control-Allow-Origin 头来允许来自 http://9.6.237.104:8018 的跨域访问。
JSONP
JSONP 是一种使用 <script> 标签加载跨域 JavaScript 的技术。通过 JSONP,可以利用浏览器对 <script> 标签的跨域支持,来发送跨域请求并获取响应数据。不过需要注意的是,JSONP 的功能仅限于获取数据,无法发送 POST 请求等操作。
例如,以下示例代码:
function jsonp(url, callback) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url + '&callback=' + callback;
document.head.appendChild(script);
}
function processData(data) {
// 处理返回的数据
}
jsonp('http://9.6.237.104:19080/esb/microService/queryCurrentThirdDataInfo', 'processData')
在上面的代码中,我们使用 jsonp() 函数来发送 JSONP 请求,并在回调函数中处理响应数据。要注意的是,在 JSONP 请求中需要将回调函数的名称作为参数传递给后端应用程序,这样后端应用程序将在响应中返回一个 JavaScript 函数,来执行回调函数并传递响应数据。
总之,以上是一些解决跨域问题的方法,具体选用哪种方法需要根据实际情况进行选择。