Nancy + jQuery通过CORS实现跨域调用

最近今天研究了下用Nancy实现跨域的调用，后端如何实现很快就查到了，前端的版本很多，各种方法都试了一遍还是不行，最后才查到可能是浏览器设置的缘故，为此还下载了Chrome浏览器并新建了一个用于调试跨域的快捷方式，还复习了下CORS的原理。

1、服务端

参考：Nancy支持跨域请求CORS_nancy跨域-优快云博客

public class MyModule : NancyModule
{
    public MyModule()
    {
        After.AddItemToEndOfPipeline((ctx) => ctx.Response
            .WithHeader("Access-Control-Allow-Origin", "*")
            .WithHeader("Access-Control-Allow-Methods", "POST,GET,OPTIONS")
            .WithHeader("Access-Control-Allow-Headers", "Accept, Origin, Content-type"));
    }
}

或

public class MyNancyBootstrapper : DefaultNancyBootstrapper
 {
        /// <summary>
        /// nancy配置
        /// </summary>
        /// <param name="container">容器</param>
        /// <param name="pipelines">管道</param>
        protected override void ApplicationStartup(TinyIoCContainer container, IPipelines pipelines)
        {
                pipelines.AfterRequest.AddItemToEndOfPipeline((ctx) =>
                {
                    ctx.Response.WithHeader("Access-Control-Allow-Origin", "*")
                        .WithHeader("Access-Control-Allow-Methods", "POST,GET,OPTIONS")
                        .WithHeader("Access-Control-Allow-Headers", "Accept, Origin, Content-type");
                });
        }
}

2、客户端

工具：jQuery

参考：https://www.cnblogs.com/daweiguo/p/14308041.html

            $.ajax({
                type: "GET",
                url: "http://localhost:4024/",
                data: {},
                headers: {
                    "Access-Control-Allow-Origin": "*",
                    'Content-Type': 'text/plain',
                },
                success: function (msg) {
                    alert("Data Saved: " + msg);
                }
            });

ps：使用上面的方法后，发现有问题，无法在不开启浏览器跨域的情况下实现跨域，之后换了一种方法，没用到jQuery而是使用js的XMLHttpRequest对象。参考的是：https://www.cnblogs.com/cjw-ryh/p/7674038.html

这里面的例子是Get方法的，如果需要改成Post，可以参考《JavaScript高级程序设计（第四版）》的第24章，网络请求与远程资源。

3、浏览器设置

参考：Chrome浏览器的跨域设置----包含新老版本两种设置_谷歌浏览器跨域设置-优快云博客

一开始没搞懂为什么要指定一个不存在的路径，就没用它。。

之后我发现，只要开起来浏览器跨域，后端不用做修改也能实现跨域。

新版浏览器跨域设置（版本号49之后的跨域设置）

1、在电脑上新建一个目录（任意位置） 例如 C:\MyChromeDevUserData

2、右键点击谷歌浏览器，选择属性；

3、在目标输入框尾部加上 --disable-web-security --user-data-dir=C:\MyChromeDevUserData

注意：

1、两个 -- 前面都是有空格的哦~

2、如果目标地址原先有引号，那么 --disable-web-security --user-data-dir=C:\MyChromeDevUserData 要加在引号外面。

4、扩展

参考：跨域资源共享 CORS 详解 - 阮一峰的网络日志

这篇文章详细介绍了CORS