仅前端解决跨域请求问题之nginx和webpack

仅前端解决跨域请求

先说nginx方法：
1.先下载nginx http://nginx.org/en/download.html
2.解压后有个conf文件夹，打开，然后打开nginx.conf文件配置

...//部分代码
server{
		listen       80;
        server_name  localhost;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
		location / {
            root   C:/;
            autoindex on;
            autoindex_exact_size off;
        	autoindex_localtime on;
            index  index.html index.htm;
        }
        //增加以下配置‘/cheese/’ 意为以‘/cheese/’ 开头的请求，比如http://www.aa.com/cheese/user，符合条件的请求即被代理为proxy_pass指定的url，即http://123.34.34.4，可根据需要自行更改
		location /cheese/ {
            proxy_pass  http://123.34.34.4;
    	}

这种配置网上有很多，这不是我的重点，重点是配置完之后我们js中的请求路径该怎么写路径没写对，配置再好也没用
比如，我的本机主机名为localhost:3000，我要请求的url为http://123.34.34.4/cheese/user
如果不用代理，我们的get请求里的url应该写http://123.34.34.4/cheese/user,即要请求的地址，但是，这样请求是会被跨域拦截的，所以我们需要借用代理，这个时候应该写http://localhost:3000/cheese/user
可以简单理解为先请求与本机同源的地址(都是localhost:3000)，然后通过nginx代理为我们真实要访问的url，否则依然会认为是跨域的，，可以认为这是在欺骗浏览器，你告诉浏览器是同源的，但其实你的真实路径并不是。

接下来是webpack的配置

webpack也可以配置类似的代理，和上面一样，网上有各种教程说怎么配置，但是很少有说怎么写请求路径的，来个最简单的配置

devServer: { 
...//省略部分代码
    proxy: {
       '/cheese/': 'http://123.34.34.4'
    }

以上配置在webpack.config.js中配置，我用的是纯webpack打包，没有用vue的脚手架，本质都差不多
以上配置和nginx类似，应该一眼就能看懂的，同样，这里请求地址应该填http://localhost:3000/cheese/user，目的是让此地址和本机地址同源，而不是与后端同源。

this.$http.get('http://localhost:3000/cheese/user')//部分代码，这里用的是vue-resource插件，挺好用的，但是已经停更了