Separating the ". NET Core2.0 +vue2.0" framework from the front and back end 12 | | Three kinds of cross-domain comparison, DTOs (data transfer object) exploration

Source: Internet
Author: User
Tags call back redis nginx server nginx reverse proxy
Update Feedback

1, Bo Friends @ The end of the children's shoes said, Nginx reverse proxy to achieve cross-domain, because I have not yet used to, to ignore, this record, for the next supplement.

Code has been uploaded github+gitee, at the end of the article has an address

Busy today to the small partners to solve the problem, the time is not sure good, are almost off work, hurriedly released: The book said, "From the beginning of the front and back end separation," ". NET Core2.0 +vue2.0" framework of the Xi. | | AOP custom filtering, Redis Primer 11.1, yesterday we talked about the distributed cache key database, mainly explained how to install, use, finally left a problem, synchronous +redis cache is relatively simple, how to use asynchronous generic access Redis, or always my heart knot, I hope you have a meeting, you can not hesitate to enlighten, this series of tutorials has been basic to the end, today said two small knowledge point, since this series is to explain the separation of the front and back, it will encounter cross-domain problems, yes, today will say cross-domain! And by the way, DTOs (data Transfer object), these things everyone used, for example, in MVC defines a ViewModel, is based on the model entity class, and then make the corresponding changes to adapt to the front-end requirements, yes, that is, if the large entity class, Complicated words will be a little laborious, today is to use an automatic mapping tool--automapper.

0. Complete the bottom left corner today Dark PurplePart

I. Why cross-domain issues arise

Cross-domain issues have long been the main source of the browser's "homologous strategy."
What is homologous? Only if the protocol, port, and domain name are the same page, then two pages have the same source.  As long as the site protocol name Protocol, host hosts, port number port three of any one of the different, the data request and transmission between the site constitutes a cross-domain call, will be limited by the same-origin policy. The same-origin policy restricts how a document or script loaded from one source interacts with a resource from another source. This is a key security mechanism for isolating potentially malicious files. The browser's same-origin policy, which prohibits cross-site invocation of client-side scripts (such as JavaScript) for services in different domains (usually referred to as using XMLHttpRequest requests), for the purpose of preventing cross-site scripting attacks.

So we are in the Web, we can not go to obtain cross-domain requests, common is not able to get the interface via JS (here to say my previous experience: in the homologous system, the front-end JS to call back-end interface, and then the back-end C # to tune the cross-domain interface, this is my previous approach, but the front and back This approach is definitely not, because then there is no front and back points, is two items, so we can only use the same homologous strategy, to achieve the purpose of cross-domain access.

Second, how to achieve the goal of cross-domain--the jsonp of three kinds of cross-domain ways

I set up a static page myself to simulate the front-end access, the following steps:

1, create a new HTML page, use jquery to send the request (the file in the project's WWW folder, you can download it yourself, or copy the code below).

Altogether three cross-domain methods

<! DOCTYPE html>"Utf-8"> <title>Blog.Core</title> <script src="Cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <style>Div {margin:10px; Word-wrap: Break-Word; }    </style> <script>$ (document). Ready (function () {$ ("#jsonp"). Click (function () {$.getjson ("http://localhost:58427/api/Login/jsonp?callBack=?", function (data) {$ ("#data-jsonp"). HTML ("Data:"+data.value);            });            }); $("#cors"). Click (function () {$.Get("Http://localhost:58427/api/Login/Token", function (data, status) {$ ("#status-cors"). HTML ("Status:"+status); $("#data-cors"). HTML ("Data:"+data);            });        });    }); </script>"Jsonp"> Send a GET </button> <div id="Status-jsonp"></div> <div id="Data-jsonp"></div> "cors"> Send a GET </button> <div id="status-cors"></div> <div id="data-cors"></div> 

 

Note: It is important to note that JSONP's front page request is very rigorous.

2. Deploy this page to your own IIS (copy to file, add the file directly in IIS, access the HTML file directory just)

3, in our project Logincontroller, design JSONP interface, core call interface we already have, that is, before the interface to obtain token GETJWTSTR

[HttpGet] [Route ("Jsonp")]         Public voidGETJSONP (stringCallBack,LongID =1,stringSub ="Admin",intExpiressliding = -,intExpiresabsoulute = -) {Tokenmodel Tokenmodel=NewTokenmodel (); Tokenmodel.uid=ID; Tokenmodel.sub=Sub; DateTime D1=DateTime.Now; DateTime D2=D1.            AddMinutes (expiressliding); DateTime D3=D1.            AddDays (Expiresabsoulute); TimeSpan Sliding= D2-D1; TimeSpan Absoulute= D3-D1; stringJwtstr =BLOGCORETOKEN.ISSUEJWT (Tokenmodel, sliding, absoulute);
       //important, be sure to write like this stringResponse =string. Format ("\ "value\": \ "{0}\"", JWTSTR); stringCall = CallBack +"({"+response+"})"; Response.writeasync (call); }

Note: Here must pay attention to JSONP interface writing, strict requirements

4, click on the "cross-domain request through JSONP" button, found that there is already data, to prove that Jsonp cross-domain has been successful, you can change your domain name to try, but cors is not yet

Iii. How to achieve the goal of cross-domain--three ways of cross-domain Add a request header implementation across domains

I didn't write it in the code, it was used before the normal handler.

Back end

         Public voidProcessRequest (HttpContext context) {//Receive Parameters            stringUName = context. request["name"]; stringdata ="{\ "name\": \ ""+ UName +"\ ", \" age\ ": \" 18\ "}"; //just add the following two sentences to the serverContext. Response.AddHeader ("Access-control-allow-origin","*"); //How a cross-domain can be requestedContext. Response.AddHeader ("Access-control-allow-methods","Post,get"); Context.        Response.Write (data); }

Front

       function Ashxrequest () {            $.post ("http://localhost:5551/ashxRequest.ashx")  "halo"  }, function (data) {                for(varin   data) {                    alert (data[i]);                }             " JSON " )        }

Everyone is interested to experiment on their own. Please leave a message.

Iv. How to achieve the goal of cross-domain--efficient cors of three kinds of cross-domain methods

1, the front-end code in the JSONP time has been written, please look up to the second section, the backend interface is also the token interface

The rest is the configuration of cross-domain, very simple!

2. Add in Configureservices

#regionCORSServices. Addcors (c=            {                //↓↓↓↓↓↓↓ Note that formal environments do not use this all-open processing ↓↓↓↓↓↓↓↓↓↓C.addpolicy ("allrequests", policy ={policy. Allowanyorigin ()//Allow any source. Allowanymethod ()//Allow any way. Allowanyheader ()//Allow any header. Allowcredentials ();//Allow Cookies                }); //↑↑↑↑↑↑↑ Note that formal environments do not use this all-open processing ↑↑↑↑↑↑↑↑↑↑//This method is generally usedC.addpolicy ("limitrequests", policy ={policy. Withorigins ("http://localhost:8020","http://blog.core.xxx.com","")//support for multiple domain ports. Withmethods ("GET","POST","PUT","DELETE")//request method added to policy. Withheaders ("Authorization");//header added to policy                });            }); #endregion

Basic notes have, everyone can read, it is so simple!

Note : When defining policy limitrequests, the source domain name should be the port domain name requested by the client, not the domain port of the current API.

3. In the Configure configuration method of the boot file, add the Enable Cors middleware service

Thanks to Bo friend @kiritio_ooo's reminder, Git has been updated

4, in need of cross-domain controller, add features (this article because in Logincontroller, so in this controller), note the name to write to Limitrequests

    [Produces ("application/json")]    [Route ("api/login")]    [Enablecors ("limitrequests")]//is here     public  class Logincontroller:controller    {     //....     }

4, good run debugging, all normal

So far, the cross-domain problem has been done spicy

V. Other cross-domain methods supplement

Nginx is a high-performance Web server, commonly used as a reverse proxy server. Nginx as a reverse proxy server, is to forward the HTTP request to another or some servers.

Cross-domain access can be achieved by mapping a local URL prefix to a Web server to be accessed across domains.

For a browser, access is a URL on the same-origin server. Nginx, by detecting the URL prefix, forwards the HTTP request to the real physical server behind it. And the prefix is removed by the rewrite command. This way the real server can handle the request correctly and does not know that the request is from the proxy server.

Simply put, the Nginx server deceives the browser and makes it think that this is a homologous call, which solves the cross-domain problem of the browser. And by rewriting the URL, it deceives the real server and makes it think that the HTTP request is coming directly from the user's browser.

This way, in order to solve the cross-domain problem, only need to move the Nginx configuration file.

Vi. Conclusion

There are three ways to achieve this, but the pros and cons are obvious.

1. Create Jsonp cross-domain manually

Pros: No browser required, this method can be used in any browser

Disadvantage: The format requirements are very strict, only support Get request mode, the back end of the request is not prompted, causing the exception can not be handled

2. Add request headers for cross-domain

Pros: Support any request mode, and the backend error will be like non-cross-domain error, you can handle the exception

Cons: Compatibility is not very good, ie words <ie10 do not support this way

Although the cors approach is somewhat similar to the request header, the package, compatibility, and flexibility are much better, highly recommended.

Vii. A tentative study of DTOs

Take a look at the following entity classes

//Database entity Classes Public classauthor{ Public stringName {Get;Set; }} Public classbook{ Public stringTitle {Get;Set; }  PublicAuthor Author {Get;Set; }}//page entity class Public classbookviewmodel{ Public stringTitle {Get;Set; }  Public stringAuthor {Get;Set; }}//API callsBookviewmodel model =Newbookviewmodel{Title=Book . Title, Author=Book . Author.name}

The above example is quite intuitive, we usually use the basic, but the problem also comes, we can see in the above code, if once in the book object to add an extra field, and then want to output this field in the foreground page, Then it is very tedious to find somewhere in the project where there is such a bookviewmodel conversion field. In addition, Bookviewmodel.author is a string-type field, But the Book.author property is author object type, we use the workaround is to get the author Name property value by Book.auther object, and then assign the Bookviewmodel property to author, so look at the pass, but think about it, if you intend to In the development of the name split into two-fisrtname and LastName, my goodness! We have to split the original ViewModel object into the corresponding two fields, then find all the transformations in the project and replace them.  
is there any way or tool to help us avoid such a situation? AutoMapper is a plug-in that meets the requirements. The

Can solve all problems once and for all, with a single-click operation, and then quickly using dependency injection:

// automapper Auto Map             // mapper.initialize (cfg = cfg. Createmap<blogarticle, blogviewmodels> ());             // Blogviewmodels models = mapper.map<blogarticle, blogviewmodels> (blogarticle);              = imapper.map<blogviewmodels> (blogarticle);//Just take this one sentence completely. All conversions

Today because of the relationship between time, did not speak of AutoMapper, see you Tomorrow ~

Eight, CODE

Github.com/anjoy8/blog.core

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.