由于浏览器的同源策略限制，所以会出现跨域的问题。同源策略是一种约定，它是浏览器最核心也最基本的安全功能。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（比如http和https就是不同协议），主机（域名或者IP地址）和端口号

之前有用jsoap处理跨域的问题，下面推荐两种比较主流的方式

前端代码打包到后端服务的项目中

前端以Vue.js为例，后端以SpringBoot为例

首先前端项目打包

• cd 项目根目录
• npm install 安装Vue.js的依赖
• npm run build 编译打包前端项目

编译完成后，项目根目录会多出一个dist的文件夹，文件夹内就是完整的前端项目

后端打包

然后在后端项目src目录下建立webapp的文件夹，将前端项目的dist文件夹内的所有内容拷贝到webapp内（温馨提示放入resources目录也可以，我们为了好区分就新增一个目录）

pom.xml加入下面resources这样的配置，这样打成jar包时就可以引入webapp内的内容

<build>

<plugins>

<plugin>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-maven-plugin</artifactId>

</plugin>

</plugins>

<!--打成jar包时引入webapp-->

<resources>

<resource>

<!-- 指定resources插件处理哪个目录下的资源文件 -->

<directory>src/main/webapp</directory>

<!--注意此次必须要放在此目录下才能被访问到 -->

<targetPath>META-INF/resources</targetPath>

<includes>

<include>**/**</include>

</includes>

</resource>

</resources>

</build>

Nginx转发

有些项目前后端需要彻底分离部署，这时候可以依赖Nginx神器做代理转发我们的前端请求

把前端项目dist(可以随意改名哈)放到Nginx或者tomcat，然后在Nginx的配置文件nginx.conf增加一个配置作为转发即可

location /houtai/ {

proxy_pass 后台接口地址;

tcp_nodelay on;

proxy_set_header Host $host;

proxy_set_header X-Real-IP $remote_addr;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

}

location /houtai/，这个配置后台作为前端请求后台接口的根路径即可，Nginx只要匹配到这个根路径就会转发到proxy_pass;