Comment configurer IIS pour SVG et les tests Web avec Visual Studio?

14

Disons que j'ai une page Web simple avec une image svg:

<img src="foobar.svg" alt="not working" />

Si je crée cette page en tant que page html statique et que je la visualise directement, svg s'affiche. Si je tape l'adresse de ce svg - elle s'affiche.

Mais lorsque je crée cela en tant que page .aspx et que je le lance dynamiquement à partir de Visual Studio, j'obtiens du alttexte. Si je tape l'adresse de ce svg (depuis localhost, pas en tant que fichier local) - le navigateur essaie de le télécharger au lieu de l'afficher.

J'ai déjà défini le type MIME dans IIS (pour l'ensemble du serveur - "image / svg + xml") et redémarré IIS. Même effet qu'auparavant.

Question: que dois-je faire de plus?

Mise à jour

WireShark ne fonctionnera pas (c'est dans la documentation), j'ai aussi essayé RawCap, mais il ne peut pas tracer ma connexion (bizarre), heureusement Fiddler a travaillé:

Du client:

GET http://127.0.0.1:1731/svg/document_edit.svg HTTP/1.1
Host: 127.0.0.1:1731
User-Agent: Mozilla/5.0 (Windows NT 6.1; rv:10.0.1) Gecko/20100101 Firefox/10.0.1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip, deflate
Connection: keep-alive

Réponse du serveur:

HTTP/1.1 200 OK
Server: ASP.NET Development Server/10.0.0.0
Date: Thu, 16 Feb 2012 11:14:38 GMT
X-AspNet-Version: 4.0.30319
Cache-Control: private
Content-Type: application/octet-stream
Content-Length: 87924
Connection: Close

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:

*** FIDDLER: RawDisplay truncated at 128 characters. Right-click to disable truncation. ***

Pour mémoire, voici des questions / réponses utiles pour Fiddler: /programming/826134/how-to-display-localhost-traffic-in-fiddler- while- debugging- an-asp- net-applicati

greenoldman
la source
Pensez que vous pourriez obtenir de meilleures réponses pour cela sur SO. En bref, en supposant qu'ASPX fonctionne déjà, vous devez émettre SVG comme type MIME à partir de la page ASPX pour que le navigateur puisse croire qu'il s'agit d'un fichier SVG. Vous essayez, vraisemblablement, d'émettre dynamiquement du SVG depuis la page? Si c'est le cas, AFAIK si cela fonctionne comme une seule page, cela fonctionnera dans une entrée IMG.
TristanK
@TristanK, aspx n'émet pas de "SVG comme type MIME", il contient simplement <img src...comme indiqué ci-dessus, aspx est "traduit" en page HTML complète, mais l'envoi de tout le contenu (html, puis svg) est effectué par IIS.
greenoldman
Je ne comprends toujours pas ce que vous décrivez, mais je pense que c'est une question de développement, il serait donc préférable de poser sur StackOverflow.
TristanK
2
Prenez une copie de Fiddler puis tracez les deux demandes différentes. Cela pourrait vous donner des indices sur la raison pour laquelle une demande directe d'image se comporte différemment dans chacun de ces cas. Les indices seront très probablement dans les en-têtes retournés. Sans ces données, tout ce que nous pouvons faire est de deviner quelles réponses votre serveur retourne.
Kev
@macias Comme l'a dit Kev, vous allez avoir besoin de suivre le trafic. Le violoneux ou le vieux Wireshark ordinaire devrait pouvoir le ramasser.
Chris S

Réponses:

14

À partir de votre trace Fiddler, il semble que vous serviez vos pages à l'aide du serveur Web Visual Studio intégré:

Server: ASP.NET Development Server/10.0.0.0

Si cela était servi par IIS7, nous verrions alors:

Server: Microsoft-IIS/7.5

Le serveur Web Visual Studio intégré ne dispose que d'un ensemble limité de types MIME qu'il peut servir et n'a aucune connaissance des types MIME que vous définissez pour IIS7. J'ai écrit une réponse à un problème similaire sur Stack Overflow il y a quelque temps:

Définition des types MIME à l'aide du serveur de développement ASP.NET

Le serveur intégré sert votre .svgfichier en tant que:

Content-Type: application/octet-stream

C'est probablement ce qui provoque le téléchargement du navigateur.

Dans Visual Studio, vérifiez que vous utilisez IIS Express en ouvrant les propriétés du projet de votre site et en sélectionnant l'onglet "Web" dans la liste des onglets verticaux:

entrez la description de l'image ici

Si vous n'avez pas installé IIS 7.5 Express, vous pouvez l'obtenir à partir d'ici:

http://www.microsoft.com/download/en/details.aspx?id=1038

Vous aurez besoin de Visual Studio 2010 Service Pack 1 pour profiter pleinement:

http://support.microsoft.com/kb/983509

Prise en charge d'IIS Express

Visual Studio 2010 SP1 vous permet d'utiliser Internet Information Services (IIS) 7.5 Express comme serveur d'hébergement local pour le site Web et les projets d'application Web.

Remarque IIS 7.5 Express n'est pas inclus dans SP1 et vous devez le télécharger séparément. Pour plus d'informations, visitez le blog suivant: http://weblogs.asp.net/scottgu/archive/2011/01/03/vs-2010-sp1-beta-and-iis-developer-express.aspx

Une fois cela fait, vous pouvez ajouter le .svgtype MIME au web.configfichier de votre application :

<configuration>
   <system.webServer>
      <staticContent>
         <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
      </staticContent>
   </system.webServer>
</configuration>
Kev
la source
Merci beaucoup. Dans mon cas, cela s'est passé quelque peu différemment - pour passer à IIS (j'ai ISS, pas ISSExpress), j'ai dû exécuter VS en mode administrateur, après quoi c'était tout - je n'ai pas défini svg dans web.config parce que j'ai défini déjà dans IIS.
greenoldman
2

Comme mentionné ci-dessus, Cassini ignore ces paramètres dans web.config, il faut donc utiliser IIS Express à la place (dans les paramètres du projet VS) /programming/5924647/setting-mime-types-using-the-asp- net-development-server

Pour obtenir plus d'informations sur la configuration des types MIME à l'aide de l'interface utilisateur d'administration ou à l'aide de web.config pour IIS ou IIS Express, voir: http://4rapiddev.com/tips-and-tricks/add-mime-type-flv-mp4- in-iis-for-a-website-or-global / et http://4rapiddev.com/tips-and-tricks/add-mime-type-flv-mp4-to-web-config-in-iis-7 /

George Birbilis
la source
Posez-vous cela comme une nouvelle question, ou rhétorique? Si c'est le cas, veuillez poser une nouvelle question avec tous les détails. Si ce dernier, cela devrait probablement être un commentaire - en l'état, c'est une très mauvaise réponse ( voir ici pourquoi )
voretaq7
révisé avec de meilleurs liens
George Birbilis
beaucoup mieux :-)
voretaq7
2

J'ai utilisé la réponse Kev, par:

  1. Installation d'IIS 8.0 Express à partir du programme d'installation de la plateforme Web
  2. Modification des propriétés du projet pour utiliser IIS Express et création de répertoire virtuel pour celui-ci
  3. Ajout dans la configuration de web.config → system.webServer
<staticContent>
    <remove fileExtension=".svg" />
    <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
</staticContent>
Volodymyr Kotylo
la source
2

Ma solution de contournement a été de créer mon propre httphandler localement qui a remplacé le type de contenu pour svg.

public class SvgHandler : IHttpHandler
{

    public bool IsReusable
    {
        get { return false; }
    }

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "image/svg+xml";
        context.Response.BinaryWrite(File.ReadAllBytes(context.Request.PhysicalPath));
        context.Response.End();
    }
}

et dans web.config j'ai ajouté:

<httpHandlers>
  <add verb="*" path="*.svg" type="SvgHandler" />
</httpHandlers>

avec cette solution, vous n'avez pas besoin d'utiliser IIS express, vous pouvez simplement utiliser le serveur de développement normal dans visual studio 2010

Robin Karlsson
la source
1
C'est assez dégoûtant que ce genre de chose doit arriver ...
Jarrod Mosen
1

J'utilise IIS7 et j'ai pu résoudre ce problème en cliquant avec le bouton droit sur le serveur dans IIS et en choisissant des propriétés. Ensuite, j'ai cliqué sur le bouton Types MIME .... J'ai ensuite cliqué sur Nouveau. Pour l'extension, j'ai tapé .svg. Pour le type MIME, j'ai tapé image / svg + xml. J'ai ensuite enregistré tout et j'ai fait un iisreset à partir de l'invite de commande. Fonctionne très bien.

Troy Tabor
la source