关于vue跨域

其实这篇博客应该是在三四个月之前就应该完成的，奈何本人拖延症又犯了，所以拖到了现在，也是不想之后再遇到同样的问题解决不了，其中非常感谢张大佬给予的帮助，写博客只是为了便于自己理解，所以其中有什么不对或者有漏洞的地方还望多多指教

第一步 找到根目录下的vue.config.js

module.exports = {
    publicPath: './',
    devServer: {
        proxy: {
            '/api' : {
                target : 'http://106.14.96.140',
                pathRewrite:{'^/api':''},
                ws: true,
                changeOrigin:true
            }
        }
    }

}

把target 改成  http://106.14.96.140:18082     重启vue 

然后 比如，你vue 设置的 的本地服务器是 192.168.1.100:8080

比如 服务器api  http://106.14.96.140:18082/user/login  改成  http:// 192.168.1.100:8080/api/user/login   然后别忘application/json 传输

因为 vue 其实就是封装的js  你直接定义 util.js  名字你自己看着来。 主要是vue 可以module 所以直接 export 就可以    这个脚本 是某某某.js 里面是我定义的 对象 和 方法，

然后我直接导出 

export default SystemEvent

导出的可以是 一个对象 {}     直接在项目中import引入就可   里面的方法 直接webUtil .出来就行

 调用很简单， 直接这样用，  不要担心 多次 import  js内存只有一份

 注意IP   和端口

跨域必须是服务器ping 服务器 才不会跨域     所以是你vue 创建的代理服务器 ping  才能行的

那代理服务器的意义又是什么呢？

代理服务器 是你vue 创建的 localhost：8080 你发现你自己能用localhost：8080 访问网站，说明 vue 内部是给你创建一个服务器的，然后 什么情况下才会跨域，仅仅只是 浏览器ping  远程服务器 才会存在跨域问题，所以得想办法 不用浏览器ping 服务器，所以vue 想的招是， 我自己既然创建了内部服务器， 那我用自己的内部服务器 去ping 远程的服务器，这样就解决了跨域问题，所以 vue  才会给出配置 代理服务器的选项

 一共分为这几种情况，
你vue  建立的服务器 叫做 代理服务器，就是因为建立了服务器，你在本地才能用  localhost:8080 访问网站，然后 接下来，分成2个，一个叫 浏览器 对服务器，（就是你用的 ajax）
一个叫做 app 对服务器。（每个引擎都不一样，比如unity 内部就是用c++自己做的网络http请求）

注意 ，仅仅只有 浏览器 对服务器 才会造成  跨域问题， 仅仅是浏览器， 其他都没有，因为浏览器 属于在别人软件上运行自己的程序， 浏览器为了保护自己app 做的防护，但是vue是做网页的，所以在开发的时候，咱们就得想办法 把跨域搞定，这样才能开发。 但是服务器端，一般尽量不要设置任何人访问，这样容易被攻击，很早以前，  开发，只能傻傻的 把后端做成 跨域，这样很危险，vue 想了一个办法， 叫做代理服务器去 ping 远程服务器 ，

什么意思呢

你可以认为  代理服务器 其实就是一个app ，因为在app 里面 可以自己用c++ 直接写 http相应服务器。 不用浏览器的ajax，所以服务器 ping 服务器没有跨域 ，然后，既然vue 写了代理服务器 我们怎么用呢、 其实很简单。 

一共分为2步

既然 vue 自己写了 代理服务器(app)  也就是说明，只要把 远程的 服务器接口拿到。然后通过自己的 代理服务器转发一下，就OK 了。

所以，vue 搞了一套，在vue .config.js 中配置 远程的url . 只需要 把http://106.14.96.140:18082 这部分写上就行   这一块叫做域名

域名是 IP + 端口号 

然后 为什么 需要写 api 呢？

 

是因为 vue自己做转发的时候， 他自己害怕与自己的路由搞混，所以 你自己加了个前缀

比如 说     远程的IP 叫做  http://106.14.96.140:18082/user/login  这个是远程的服务器 对吧，你浏览器ajax访问需要跨域但是vue给你做转发的时候，ping 成功了。但是vue需要让你知道。 怎么办呢。
很简单。
你只需要吧前面的  http://106.14.96.140:18082/  换成 vue 自己的代理服务器的IP 就行了 
换成  http://localhost:8080/ 就可以了

vue 呢，自己说的，我帮你做转发，然后会转发到自己的 代理服务器上  因为 如果转发到自己ip 这样就不会在存在跨域了，ajax 也是只是识别 自己的 服务器内的url 

怎么样 才能解决跨域呢，其实跨域是解决不掉的。因为比如Chrome浏览器， 是花费了 几千了程序员 做了很多年才搞定的， 不是说被别人随便攻克的。

所以直接从浏览器解决是不可能的。！  记住是不可能的

那怎么办呢。解决跨域呢。 ajax  怎么工作的？ 是从本地网站 拿到链接才能访问，  记住 是本地网站，也就是说  只有域名相同的情况下，才不会跨域 

然后 vue 自己不是实现了一套 本地的代理服务器吗，他这样做， 他先通过 本地的代理服务器，去访问 远程服务器的网址。  然后拿到数据之后。 
在通过本地的代理服务器把数据给你

那你怎么获取呢？  他说 你只需要。把 远程的域名 换成我本地的域名，就能访问了

比如   你用ajax 访问  http://106.14.96.140:18082/user/login

vue说， 你配置好之后， 只需要 用本地的域名访问就行。结果就变成了http://localhost:8080/user/login这样访问 就OK 了

换言之 
http://106.14.96.140:18082/user/login   等效于  
http://localhost:8080/user/login

看域名部分 

 vue 的代理服务器就干这个事情的，帮你转发   

http://localhost:8080 是你vue的代理服务器域名

转发到自己内部的服务器， 这样用ajax 访问起来 是不是就舒服了， 不存在跨域了

所以vue跨域主要就是利用代理服务器来作为一个中间点，用来传递数据，解决跨域，所以说 
http://106.14.96.140:18082/user/login   等效于  http://localhost:8080/user/login

api也就可以说是等于 http://106.14.96.140:18082的

所以在vue，config，JS中配置的就是浏览器的地址，而在需要请求数据的时候配置的就是你需要拿数据的域名的地址，

http:// 这个叫做请求头

192.168.1.1:8080 这块叫域名 

后面叫路由

到目前这一步 你应该理解  转发了，其实很简单， 就是把http://106.14.96.140:18082/user/login   转换成http://localhost:8080/user/login

但是 发现问题了

如果 我定义了 一个user 的 vue对象   怎么办？他会直接路由到  user 的 vue对象下

意思是路由重了，所以分别不了是路由的user还是定义的一个user，，所以必须需要定义一个 前缀

 就是这个，所以就有了api

你觉得http://106.14.96.140:18082/user/login   转换成http://localhost:8080/user/login  这个就对了？？nonono

 应该是http://localhost:8080/api/user/login

 ws 是开启webSocket  

未来会用到，用与我后端 给你消息的

pathReWrite 里面其实做了一个 字符串 subString 的功能

changeOrigin 是是否匿名 访问服务器。这个都无所谓了， 设置为true 就行

okk 到这里就完啦，在这里非常感谢张大佬给我的帮助