当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。
跨源资源共享 Cross-Origin Resource Sharing (CORS) 是一个新的 W3C 标准，它新增的一组HTTP首部字段，允许服务端其声明哪些源站有权限访问哪些资源。换言之，它允许浏览器向声明了 CORS 的跨域服务器，发出 XMLHttpReuest 请求，从而克服 Ajax 只能同源使用的限制。
另外，规范要求，对那些可能对服务器数据产生副作用的 HTTP 请求方法（特别是 GET 以外的 HTTP 请求，或者搭配某些 MIME 类型的 POST 请求），浏览器必须首先使用 OPTIONS 方法发起一个预检请求（preflight request），从而获知服务端是否允许该跨域请求。服务器确认允许之后，才发起实际的 HTTP 请求。在预检请求的返回中，服务器端也可以通知客户端，是否需要携带身份凭证（包括 Cookies 和 HTTP 认证相关数据）。
前后端分离开发必然涉及到跨域的问题，后端的IP，端口断然跟前端不同，先了解一下。
正向代理 和 反向代理
先说正向代理，
举个俗俗的例子，我缺钱，C有钱，但C不直接借给我，我就去找B，让B去帮我借钱。B就是我的代理。
所谓正向代理就是顺着请求的方向进行的代理，即代理服务器是由你配置为你服务，去请求目标服务器地址。
再说反向代理，
反向代理就是我缺钱，我去找一个网贷平台，提交资料后，网贷平台直接将钱打给我。但是我不知道，也不用关注网贷平台的钱从哪里来。网贷平台内部他们可能从哪一个zddxyz那里融的钱。对我而言网贷平台和他们的金主是一起的。
同样通过上面我们例子可以看到，此时的代理服务和后面的目标是一个系统的（网贷平台和金主）。他们是对外提供服务的，所以称为反向代理，代理的是后的人。
我们前端要用到的是反向代理，接下来会仔细说明。
2.前端相关配置 2.1 反向代理寻找main.js文件，如下图：
打开，输入下面这几行代码，完成反向代理的配置，其中8803是后端网关zuul的端口。
// 设置反向代理，前端请求默认发送到 http://localhost:8802/apivar axios = require('axios')axios.defaults.baseURL = 'http://localhost:8803/api'// 全局注册，之后可在其他组件中通过 this.$axios 发送数据Vue.prototype.$axios = axios 2.2 跨域支持在config/index.js找到proxyTable,修改为以下代码：
proxyTable: { '/api': { target: 'http://localhost:8803', changeOrigin: true, pathRewrite: { '^/api': '' } } }, 2.3登录验证页面找到我们以前写的登录界面
这里@click="login"是指点击“登录’'按钮，触发login方法，因此我们需要编写login方法。
在data()下面新建methods:{},在这里面编写login方法，后端接口为“/user/login”。
3.后端接口编写我们开始编写后端的接口“/user/login”。
3.1.修改my-user中的controller文件打开my-user中的controller文件，输入以下代码；
@RequestMapping(value = "/login", method = RequestMethod.POST) public JSONObject login(@RequestBody JSONObject jsonObject){ String userName = jsonObject.getString("userName"); String password = jsonObject.getString("password"); //获取用户名，并打印 System.out.println(userName); System.out.println(password); JSONObject result = new JSONObject(); //若正确返回200，若错误返回400 if(userName.equals("xiaoming")&& password.equals("123456")){ result.put("state",200); }else{ result.put("state",400); } return result; } 3.2 引入相关依赖根据restful接口规范，我们要求传进来的是JSON对象，传出的也是JSON对象。因此我们在父工程的pom文件中引入JSON的依赖：
<!--json--> <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.51</version> </dependency>my-user的pom文件中输入：
<dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> </dependency>这样为了是子模块中依赖文件的版本都是统一的，也是为了方便修改各个依赖文件的版本。
4.验证重启my-user微服务，打开前端登录页面： http://localhost:8080/#/login
输入：xiaoming，123456
IDEA控制台输出，说明前端数据已经传入后端：
浏览器控制台输出，说明后端数据也可以传到前端：
当然，如果输出用户名和密码，返回400
因为设计到跨域问题，后端controller文件在类名前面一点要加上@CrossOrigin注解