UTF-8 字符串未在 AngularJS 中正确解码 [英] UTF-8 string not decoded correctly in AngularJS

问题描述

我在基于 AngularJS 构建的 SPA 中有一个文本输入框，供用户向打印输出添加标题.输入框声明如下:

I have a text input box, within a SPA built on AngularJS, for users to add a title to a printout. The input box is declared like this:

<input class="chart-title" type="text" ng-model="chartTitle" ng-change="titleChanged()"/>

文本框填充了服务器提供的默认标题.用户可以将标题更改为适合他们的任何内容.当标题更改时，服务器会更新并在响应的标题中发回一个新标题，然后替换框中的标题.这对于标准的 ASCII 类型字符非常适用.

The text box is filled with a default title provided by the server. A user may change the title to whatever suits them. When the title is changed, the server is updated and sends back a new title in the header of the response which then replaces the title in the box. This works perfectly for standard ASCII type characters.

但是，对于 unicode 字符(例如 àßéçøö)，它不起作用.文本被正确发送，在服务器上正确更新，并正确返回到 SPA.请求/响应的标头在这里:

However, for unicode characters (for example àßéçøö) it does not work. The text is sent down correctly, updated on the server correctly, and returned to the SPA correctly. The headers for the request/response are here:

Request URL:http://blahblahblah/api/.....&chartTitle=Instrument:%20%C3%A0%C3%9F%C3%A9%C3%A7%C3%B8%C3%B6

响应头:

chartTitle: Instrument: %C3%A0%C3%9F%C3%A9%C3%A7%C3%B8%C3%B6

请求是使用 AngularJS $http() 发出的.如您所见，这些值匹配(出于显而易见的原因，请求代码中的空格为 %20).但是，当我使用 headers("charttitle") 检索标题时，我收到的值是 Instrument: ÃÃéçøö

The request is made using AngularJS $http(). As you can see the values match up (the space in the request codes out as %20 for obvious reasons). However, when I retrieve the header, using headers("charttitle"), the value I receive is Instrument: àÃéçøö

javascript 包在索引中使用字符集 utf-8 声明:

The javascript bundle is declared in the index with charset utf-8:

<script src="/js/bundle.js" type="text/javascript" charset="UTF-8"></script>

此外，html 是用正确的字符集声明的，在我看来，head 声明中有两个地方:

In addition the html is declared with the correct charset, it seems to me in two places within the head declaration:

<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
<meta charset="utf-8" />

根据本网站(http://www.i18nqa.com/debug/utf8-debug.html) 看来我得到了 Windows1252 字符编码.这没有任何意义.如果绝对必要，我可以编写一个可怕的 hack 将 utf-8 字符串转换为 Windows1252 字符，但这似乎有点极端，而且我很容易出错.

According to this website (http://www.i18nqa.com/debug/utf8-debug.html) it appears that I am getting Windows1252 character encoding. This does not make any sense. I could, if absolutely necessary, write a horrible hack converting the utf-8 string to Windows1252 characters, but this seems a little extreme and quite error prone to me.

效果是一样的，无论是在 Chrome、Firefox 还是 IE11 上.完整的请求标头在这里:

The effect is the same, whether on Chrome, Firefox or IE11. The full request headers are here:

Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate, sdch, br
Accept-Language:en-GB,en-US;q=0.8,en;q=0.6
Connection:keep-alive
Host:blahblahblah
Origin:http://blahblahblah
Referer:http://blahblahblah/
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36

有什么我遗漏了吗?有什么忘记了吗?

Is there anything I have left out? Anything that has been forgotten?

编辑

请求的完整响应标头.

Access-Control-Allow-Origin:*
Access-Control-Expose-Headers:chartTitle
Cache-Control:private
chartTitle:Instrument: %C3%A0%C3%9F%C3%A9%C3%A7%C3%B8%C3%B6
Content-Disposition:attachment; filename=PrintData.pdf
Content-Length:1391643
Content-Type:application/octet-stream
Date:Fri, 20 Jan 2017 11:19:07 GMT
Server:Microsoft-IIS/10.0
X-AspNet-Version:4.0.30319
X-Powered-By:ASP.NET
X-SourceFiles:=?UTF-8?B?QzpcR2l0XEVPU1xSZXZpZXdlci5XZWJcYXBpXFByaW50XGQyOTNkNjA4NWVlYzlhNTEwYjQ5YThmZGQxNjNhMjAwMWZhYTFjMGY5YzhiMzUxYzE5ZjYxYWMwYTY1OWVhMDM=?=

headers

$http({
    method: 'GET',
    url: filePath,
    params: {
        fileName: fileName
    },
    responseType: 'arraybuffer',
    headers: {'Content-Type' : 'application/json; charset=UTF-8'}
}).success(function (data, status, headers) {
    ready();
    if (status == 200) {
        var chartTitle = headers("charttitle");
        var printoutInformation = {'chartTitle' : chartTitle, 'pdfData' : data};
        deferred.resolve(printoutInformation);
    }
    else {
        deferred.resolve(null);
    }
    }).error(function (data) {
        ready();
        console.log(data);
    });
    return deferred.promise;

编辑

api 的 web.config 也指定了 utf-8:

The web.config for the api also specifies utf-8:

    <globalization requestEncoding="utf-8" responseEncoding="utf-8"/>

TL;DR

在文本框中，我想显示Instrument àßéçøö"，而我看到的是Instrument: ÃÃéçøö"

In a text box I want to display "Instrument àßéçøö" and instead I am seeing "Instrument: à Ãéçøö"

推荐答案

您的问题已解决.

基于此来源，

UTF-8 字符调试及其编解码

您得到的响应是编码的 utf-8 字符串的实际字符

因此，您需要对其进行解码才能获得结果.

So, you need to decode that inorder to get your result.

这是执行此操作的代码.

HEre is the code to do it.

    decoded =  decodeURIComponent('%C3%A0%C3%9F%C3%A9%C3%A7%C3%B8%C3%B6')

    console.log(decoded);

   The result is => "àßéçøö"

我们必须这样做才能获得实际的字符串而不是 UTF-8

所以，从你得到的回复中，Ãéçøö

So, from your response you got,à Ãéçøö

decodeURIComponent(escape("Ãéçøö")) =>àßéçøö"

定义:

• 表示给定编码统一资源标识符 (URI) 组件的解码版本的新字符串.

所以，这是你的方法.

if (status == 200) {
    var original = headers("charttitle");
    var chartTitle = decodeURIComponent(escape(original));
    console.log(chartTitle);
    var printoutInformation = {'chartTitle' : chartTitle, 'pdfData' : data};
    deferred.resolve(printoutInformation);
}

现在，您将获得与发送相同的标头.

Now, you will get the headers same as you send.

这篇关于UTF-8 字符串未在 AngularJS 中正确解码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！