http服务下，请求接口会报跨域，能不能麻烦给个解决跨域的示例，谢谢 #52

zhuibo66 · 2023-11-07T00:24:56Z

http服务下，请求接口会报跨域，能不能麻烦给个解决跨域的示例，谢谢

hiroi-sora · 2023-11-07T01:28:04Z

请尝试下述操作：

打开 UmiOCR-data\py_src\server\web_server.py
第13行，原本是：

from .bottle import Bottle, ServerAdapter, request, HTTPResponse

现在改为：

from .bottle import Bottle, ServerAdapter, request, HTTPResponse, response

第21行，插入一个函数：

# 设置响应头，允许跨域
@UmiWeb.hook("after_request")
def enable_cors():
    response.headers["Access-Control-Allow-Origin"] = "*"
    response.headers["Access-Control-Allow-Headers"] = "*"
    response.headers["Access-Control-Allow-Methods"] = "GET, POST, PUT, OPTIONS"

测试跨域请求。

zhuibo66 · 2023-11-07T12:34:43Z

请尝试下述操作：

打开 UmiOCR-data\py_src\server\web_server.py
第13行，原本是：

from .bottle import Bottle, ServerAdapter, request, HTTPResponse

现在改为：

from .bottle import Bottle, ServerAdapter, request, HTTPResponse, response

第21行，插入一个函数：

# 设置响应头，允许跨域
@UmiWeb.hook("after_request")
def enable_cors():
    response.headers["Access-Control-Allow-Origin"] = "*"
    response.headers["Access-Control-Allow-Headers"] = "*"
    response.headers["Access-Control-Allow-Methods"] = "GET, POST, PUT, OPTIONS"

测试跨域请求。

试了下，如果直接用案例中的js代码，会报：Access to fetch at 'http://127.0.0.1:1224/api/ocr' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

const url = 'http://127.0.0.1:1224/api/ocr';
const data = {
    base64: 'iVBORw0KGgoAAAANSUhEUgAAAC4AAAAXCAIAAAD7ruoFAAAACXBIWXMAABnWAAAZ1gEY0crtAAAAEXRFWHRTb2Z0d2FyZQBTbmlwYXN0ZV0Xzt0AAAHjSURBVEiJ7ZYrcsMwEEBXnR7FLuj0BPIJHJOi0DAZ2qSsMCxEgjYrDQqJdALrBJ2ASndRgeNI8ledutOCLrLl1e7T/mRkjIG/IXe/DWBldRTNEoQSpgNURe5puiiaJehrMuJSXSTgbaby0A1WzLrCCQCmyn0FwoN0V06QONWAt1nUxfnjHYA8p65GjhDKxcjedVH6JOejBPwYh21eE0Wzfe0tqIsEkGXcVcpoMH4CRZ+P0lsQp/pWJ4ripf1XFDFe8GHSHlYcSo9Es31t60RdFlN1RUmrma5oTzTVB8ZUaeeYEC9GmL6kNkDw9BANAQYo3xTNdqUkvHq+rYhDKW0Bj3RSEIpmyWyBaZaMTCrCK+tJ5Jsa07fs3E7esE66HzralRLgJKp0/BD6fJRSxvmDsb6joqkcFXGqMVVFFEHDL2gTxwCAaTabnkFUWhDCHTd9iYrGcAL1ZnqIp5Vpiqh7bCfua7FA4qN0INMcN1+cgCzj+UFxtbmvwdZvGIrI41JiqhZBWhhF8WxorkYPpQwJiWYJeA3rXE4hzcwJ+B96F9zCFHC0FcVegghvFul7oeEE8PvHeJqC0w0AUbbFIT8JnEwGbPKcS2OxU3HMTqD0r4wgEIuiKJ7i4MS16+og8/+bPZRPLa+6Ld2DSzcAAAAASUVORK5CYII=',
    // Paddle引擎插件格式
    options: {
        cls: false,
        language: "models/config_chinese.txt",
        limit_side_len: 960
    }
    // Rapid引擎插件格式
    // options: {
    //     angle: false,
    //     language: "简体中文(V4)",
    //     maxSideLen: 1024
    // }
};

fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data),
 
    })
    .then(response => response.json())
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error(error);
    });

hiroi-sora · 2023-11-07T16:01:39Z

你是在什么框架下运行js的呢？试一下浏览器环境有没有问题？

hiroi-sora · 2023-11-07T16:05:35Z

另外，作为一种临时措施，前端层面可以往fetch的字典中添加 mode: 'no-cors' 来绕过跨域问题：

fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data),
        mode: 'no-cors', // 添加这一行
    })

zhuibo66 · 2023-11-08T00:07:37Z

我目前用的版本：Umi-OCR_Paddle_dev_20231105

说下我这边的复现步骤：

1、本地创建test.html文件，内容如下，然后直接用浏览器打开，F12打开控制台提示报错Access to fetch at 'http://127.0.0.1:1224/api/ocr' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
</head>

<body>
    <script>
        const url = 'http://127.0.0.1:1224/api/ocr';
        const data = {
            base64: 'iVBORw0KGgoAAAANSUhEUgAAAC4AAAAXCAIAAAD7ruoFAAAACXBIWXMAABnWAAAZ1gEY0crtAAAAEXRFWHRTb2Z0d2FyZQBTbmlwYXN0ZV0Xzt0AAAHjSURBVEiJ7ZYrcsMwEEBXnR7FLuj0BPIJHJOi0DAZ2qSsMCxEgjYrDQqJdALrBJ2ASndRgeNI8ledutOCLrLl1e7T/mRkjIG/IXe/DWBldRTNEoQSpgNURe5puiiaJehrMuJSXSTgbaby0A1WzLrCCQCmyn0FwoN0V06QONWAt1nUxfnjHYA8p65GjhDKxcjedVH6JOejBPwYh21eE0Wzfe0tqIsEkGXcVcpoMH4CRZ+P0lsQp/pWJ4ripf1XFDFe8GHSHlYcSo9Es31t60RdFlN1RUmrma5oTzTVB8ZUaeeYEC9GmL6kNkDw9BANAQYo3xTNdqUkvHq+rYhDKW0Bj3RSEIpmyWyBaZaMTCrCK+tJ5Jsa07fs3E7esE66HzralRLgJKp0/BD6fJRSxvmDsb6joqkcFXGqMVVFFEHDL2gTxwCAaTabnkFUWhDCHTd9iYrGcAL1ZnqIp5Vpiqh7bCfua7FA4qN0INMcN1+cgCzj+UFxtbmvwdZvGIrI41JiqhZBWhhF8WxorkYPpQwJiWYJeA3rXE4hzcwJ+B96F9zCFHC0FcVegghvFul7oeEE8PvHeJqC0w0AUbbFIT8JnEwGbPKcS2OxU3HMTqD0r4wgEIuiKJ7i4MS16+og8/+bPZRPLa+6Ld2DSzcAAAAASUVORK5CYII=',
            // Paddle引擎插件格式
            options: {
                cls: false,
                language: "models/config_chinese.txt",
                limit_side_len: 960
            }
            // Rapid引擎插件格式
            // options: {
            //     angle: false,
            //     language: "简体中文(V4)",
            //     maxSideLen: 1024
            // }
        };

        fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data),

            })
            .then(response => response.json())
            .then(data => {
                console.log(data);
            })
            .catch(error => {
                console.error(error);
            });
    </script>
</body>

</html>

2、在1的基础上在fetch中增加中添加mode: 'no-cors' ，然后直接用浏览器打开，F12打开控制台提示报错，POST http://127.0.0.1:1224/api/ocr 500 (Internal Server Error)

hiroi-sora · 2023-11-08T06:21:53Z

OK，感谢复现步骤。已补充修复，请参照此commit 修改python代码。（js代码无需使用mode: 'no-cors'）

测试：

更新前，按你的复现步骤：

更新后可恢复正常：

zhuibo66 · 2023-11-08T13:39:36Z

OK，感谢复现步骤。已补充修复，请参照此commit 修改python代码。（js代码无需使用mode: 'no-cors'）

测试：

更新前，按你的复现步骤：

更新后可恢复正常：

太给力了，给你点个赞，已经可以了哈。

hiroi-sora added a commit that referenced this issue Nov 7, 2023

HTTP跨域请求（#52）

0d9d314

hiroi-sora added a commit that referenced this issue Nov 8, 2023

修复跨域问题（#52）

e2329b1

zhuibo66 closed this as completed Nov 8, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

http服务下，请求接口会报跨域，能不能麻烦给个解决跨域的示例，谢谢 #52

http服务下，请求接口会报跨域，能不能麻烦给个解决跨域的示例，谢谢 #52

zhuibo66 commented Nov 7, 2023

hiroi-sora commented Nov 7, 2023 •

edited

Loading

zhuibo66 commented Nov 7, 2023

hiroi-sora commented Nov 7, 2023

hiroi-sora commented Nov 7, 2023 •

edited

Loading

zhuibo66 commented Nov 8, 2023

hiroi-sora commented Nov 8, 2023 •

edited

Loading

zhuibo66 commented Nov 8, 2023

测试：

http服务下，请求接口会报跨域，能不能麻烦给个解决跨域的示例，谢谢 #52

http服务下，请求接口会报跨域，能不能麻烦给个解决跨域的示例，谢谢 #52

Comments

zhuibo66 commented Nov 7, 2023

hiroi-sora commented Nov 7, 2023 • edited Loading

zhuibo66 commented Nov 7, 2023

hiroi-sora commented Nov 7, 2023

hiroi-sora commented Nov 7, 2023 • edited Loading

zhuibo66 commented Nov 8, 2023

hiroi-sora commented Nov 8, 2023 • edited Loading

测试：

zhuibo66 commented Nov 8, 2023

测试：

hiroi-sora commented Nov 7, 2023 •

edited

Loading

hiroi-sora commented Nov 7, 2023 •

edited

Loading

hiroi-sora commented Nov 8, 2023 •

edited

Loading