python-html跨域报错

前端代码

            $.get("http://127.0.0.1:8888/", { question: q }, function (data) {
                $("#main-content").append('<div class="dialog">\
                    <div class="portrait">div>\
                    <div class="reply"><div class="text">div>div>\
                    div>');
                $("#main-content").children().eq(-1).children(-1).children(-1).html(data);
            });

后端代码

from flask import Flask, request
from flask_cors import CORS
from chat_robot import *

app = Flask(__name__)
CORS(app)
handler = ChatRobot()


@app.after_request
def after(response):
    # 设置源
    response.headers["Access-control-Allow-Origin"] = request.headers.get(
        "Origin")
    # 设置服务器允许发送跨域请求的请求方法
    response.headers["Access-Control-Allow-Methods"] = "GET,POST,OPTIONS,PUT,DELETE"
    # 允许接收源的cookie,(前端需要将XMLHttpRequest对象的withCredentials属性也设置为true,请求才会携带cookie并允许后端设置cookie)
    response.headers["Access-Control-Allow-Credentials"] = "true"
    response.headers["Access-Control-Allow-Headers"] = request.headers.get(
        "Access-Control-Request-Headers")  # 设置请求头
    response.headers["Access-Control-Max-Age"] = 3600  # 设置预检请求的有效时间,避免频繁发送预检请求
    if request.method == "OPTIONS":
        response.status_code = 200  # 是预检请求,响应状态码必须是200或204

    return response


@app.route("/", methods=['get'])
def QA():
    question = request.values.get('question')
    answer = handler.chat_main(question)
    return answer


app.run(host='127.0.0.1', port=8888)

请求时发生错误

img

我是通过内网穿透把本机作为服务器的,用127.0.0.1可以正常访问后端,换成http网址就不行了,求解决办法

根据你的代码和描述,可能是跨域访问的问题导致出现错误。跨域问题通常涉及到浏览器的安全策略,为了保证网站安全,浏览器限制了从一个源(协议、域名、端口)发起的请求只能访问同源的资源,而跨域请求需要特殊设置。

一、在你的代码中,你已经使用 Flask-CORS 库来处理跨域问题,但仍然可能存在一些问题。以下是一些可能的解决方案:

1.检查请求地址是否正确。由于你使用了内网穿透,确保你的请求地址和端口号正确,否则会出现跨域问题。
2.检查你的服务器是否运行。确保你的后端服务器正在运行,并且监听正确的端口。
3.检查你的浏览器是否支持 CORS。目前所有主流浏览器都支持 CORS,但是如果你使用的是比较老的浏览器,可能会出现跨域问题。在这种情况下,你需要升级浏览器或使用其他的解决方案。
4.检查你的请求方法是否正确。由于你的后端服务器处理的是 GET 请求,确保你的前端代码中也是使用的 GET 请求。
5.检查你的请求头是否正确。你的后端服务器需要设置 “Access-Control-Allow-Headers” 头部,确保它与前端代码中设置的请求头一致。

二、以下是修改后的代码,包括了一些优化和注释,希望对你有所帮助:

前端代码:

$.ajax({
    url: "http://yourdomain.com:8888/",
    type: "GET",
    dataType: "json",
    xhrFields: {
        withCredentials: true  // 允许发送和接收cookie
    },
    data: { question: q },
    success: function (data) {
        $("#main-content").append('<div class="dialog">\
            <div class="portrait"></div>\
            <div class="reply"><div class="text"></div></div>\
            </div>');
        $("#main-content").children().eq(-1).children(-1).children(-1).html(data);
    }
});

后端代码:

from flask import Flask, request, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app, supports_credentials=True)  # 开启CORS,允许发送和接收cookie

@app.route("/", methods=['GET'])
def QA():
    question = request.args.get('question')  # 获取GET请求中的参数
    answer = handler.chat_main(question)
    response = jsonify(answer)  # 将答案转化为JSON格式
    return response

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=8888)

注意,在生产环境中,你需要使用一个真实的域名,而不是 IP 地址,以及一个真实的 SSL 证书来保证你的合法性

如果使用了内网穿透,那么应该使用穿透后的公网地址来访问您的后端,而不是使用 127.0.0.1。

具体来说,你需要将前端代码中的 http://127.0.0.1:8888/ 修改为穿透后的公网地址,例如 http://xxx.xxx.xxx.xxx:8888/%EF%BC%8C%E5%85%B6%E4%B8%AD xxx.xxx.xxx.xxx 是您的穿透后的公网地址。

另外,你需要确保您的穿透配置正确,并且穿透后的公网地址能够正确地将请求转发到您的后端。

错误提示说跨域目标地址是私人地址(more
Private address)所以有可能是这个问题,需要把127.0.0.1地址换成外网能访问的地址,不然即便没有出错信息,除了你自己,其他人也访问不了啊。至少要局域网地址,需要外网人员可以访问的话还要有外网地址。建议你先换个合适的ip地址试试

首先将你的服务端监听host改为所有位置,否则你只能在本机访问

app.run(host='0.0.0.0', port=8888 )

之后你的前端代码中api要保持和页面url一致来避免跨域, $.get("http://127.0.0.1:8888/", 里面的127.0.0.1换成正常的网址就可以了。

has been blocked by coks policy: The request client is not a secure
context and the resource is in more-private address space `local.
含义是有被coks策略阻止:请求客户端不是安全的上下文,并且资源位于更私有的地址空间“本地”中。
从报错来看,可能原因是跨域访问被安全策略阻止拦截了。所以这里需要你查看下以下内容:
1、请求的IP地址和端口是否正确
2、服务器运行是否正常
3、SSL证书是否过期

你这是由于浏览器的同源策略导致的,你这前端代码请求的URL是http://127.0.0.1:8888/%EF%BC%8C%E4%BD%86%E6%98%AF%E5%90%8E%E7%AB%AF%E4%BB%A3%E7%A0%81%E5%8F%AA%E5%85%81%E8%AE%B8%E6%9D%A5%E8%87%AA%E8%AF%B7%E6%B1%82%E5%A4%B4%E4%B8%AD%E7%9A%84Origin%E7%9A%84%E5%9F%9F%E5%90%8D%E8%BF%9B%E8%A1%8C%E8%B7%A8%E5%9F%9F%E8%AE%BF%E9%97%AE%EF%BC%8C%E8%BF%99%E5%B0%B1%E4%BC%9A%E5%AF%BC%E8%87%B4%E5%89%8D%E7%AB%AF%E8%AF%B7%E6%B1%82%E4%B8%8D%E6%88%90%E5%8A%9F%E3%80%82%E5%8F%AF%E4%BB%A5%E5%B0%9D%E8%AF%95%E5%B0%86Access-control-Allow-Origin%E5%93%8D%E5%BA%94%E5%A4%B4%E8%AE%BE%E7%BD%AE%E4%B8%BA*%EF%BC%8C%E8%BF%99%E6%A0%B7%E5%B0%B1%E5%85%81%E8%AE%B8%E6%9D%A5%E8%87%AA%E4%BB%BB%E6%84%8F%E6%BA%90%E7%9A%84%E8%B7%A8%E5%9F%9F%E8%AE%BF%E9%97%AE

根据你提供的截图信息,看起来你的浏览器正常访问了本地的 Flask 服务,但却发生了跨域访问的错误。你的前端代码是在某个域名下被访问的,而你的 Flask 服务是在另一个域名下运行的,所以出现了跨域问题。

为了解决这个问题,你需要在 Flask 服务中设置 CORS,以允许跨域访问。你已经使用了 flask_cors 库,这是个很好的选择,它提供了方便的装饰器和选项来设置 CORS。你的 Flask 服务应该像这样修改:

from flask_cors import CORS

app = Flask(__name__)
CORS(app)  # 允许所有域名访问


这样就可以允许所有域名访问了。如果你想限制访问,可以使用 CORS 装饰器指定允许的域名。例如:

@app.route("/")
@cross_origin(origin="http://example.com", headers=["Content-Type"])
def hello():
    return "Hello World"


这个例子只允许来自 http://example.com/ 域名的请求访问。你需要把 http://example.com/ 替换为你的前端代码所在的域名。

在设置好 CORS 之后,你的前端代码应该可以正常访问 Flask 服务了。