跨域问题来源于JavaScript的&quot;同源策略&quot;，即只有 协议+主机名+端口号 (如存在)相同，则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源，不能访问和操作其他域下的资源。跨域问题是针对JS和ajax的，html本身没有跨域问题。跨域问题怎么解决？1、响应头添加Header允许访问2、jsonp 只支持get请求不支持post请求3、httpClient内部转发4、使用接口网关——nginx、springcloud zuul (互联网公司常规解决方案)解决方式一：响应头添加Header允许访问跨域资源共享（CORS）Cross-Origin Resource Sharing这个跨域访问的解决方案的安全基础是基于&quot;JavaScript无法控制该HTTP头&quot;它需要通过目标域返回的HTTP头来授权是否允许跨域访问。<pre class="brush:js;toolbar:false">response.addHeader(‘Access-Control-Allow-Origin:*’);//允许所有来源访问&nbsp;
response.addHeader(‘Access-Control-Allow-Method:POST,GET’);//允许访问的方式</pre>解决方式二：jsonp 只支持get请求不支持post请求用法：①dataType改为jsonp&nbsp; &nbsp; &nbsp;②jsonp : &quot;jsonpCallback&quot;————发送到后端实际为https://panxu.net/?a/FromServlet?userName=644064&amp;jsonpCallback=jQueryxxx&nbsp; &nbsp; &nbsp;③后端获取get请求中的jsonpCallback&nbsp; &nbsp;&nbsp;④构造回调结构<pre class="brush:js;toolbar:false">$.ajax({
&nbsp;&nbsp;&nbsp;&nbsp;type&nbsp;:&nbsp;&quot;GET&quot;,
&nbsp;&nbsp;&nbsp;&nbsp;async&nbsp;:&nbsp;false,
&nbsp;&nbsp;&nbsp;&nbsp;url&nbsp;:&nbsp;&quot;https://panxu.net?a/FromServlet?userName=644064&quot;,
&nbsp;&nbsp;&nbsp;&nbsp;dataType&nbsp;:&nbsp;&quot;jsonp&quot;,//数据类型为jsonp&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;jsonp&nbsp;:&nbsp;&quot;jsonpCallback&quot;,//服务端用于接收callback调用的function名的参数
&nbsp;&nbsp;&nbsp;&nbsp;success&nbsp;:&nbsp;function(data)&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(data[&quot;userName&quot;]);
&nbsp;&nbsp;&nbsp;&nbsp;},
&nbsp;&nbsp;&nbsp;&nbsp;error&nbsp;:&nbsp;function()&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(&#39;fail&#39;);
&nbsp;&nbsp;&nbsp;&nbsp;}
});
String&nbsp;jsonpCallback&nbsp;=&nbsp;request.getParameter(&quot;jsonpCallback&quot;);
//构造回调函数格式jsonpCallback(数据)
resp.getWriter().println(jsonpCallback+&quot;(&quot;+jsonObject.toJSONString()+&quot;)&quot;);</pre>解决方式三：httpClient内部转发实现原理很简单，若想在B站点中通过Ajax访问A站点获取结果，固然有ajax跨域问题，但在B站点中访问B站点获取结果，不存在跨域问题，这种方式实际上是在B站点中ajax请求访问B站点的HttpClient，再通过HttpClient转发请求获取A站点的数据结果。但这种方式产生了两次请求，效率低，但内部请求，抓包工具无法分析，安全。<pre class="brush:java;toolbar:false;">$.ajax({
&nbsp;&nbsp;&nbsp;&nbsp;type&nbsp;:&nbsp;&quot;GET&quot;,
&nbsp;&nbsp;&nbsp;&nbsp;async&nbsp;:&nbsp;false,
&nbsp;&nbsp;&nbsp;&nbsp;url&nbsp;:&nbsp;&quot;https://panxu.net:8080/B/FromAjaxservlet?userName=644064&quot;,
&nbsp;&nbsp;&nbsp;&nbsp;dataType&nbsp;:&nbsp;&quot;json&quot;,
&nbsp;&nbsp;&nbsp;&nbsp;success&nbsp;:&nbsp;function(data)&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(data[&quot;userName&quot;]);
&nbsp;&nbsp;&nbsp;&nbsp;},
&nbsp;&nbsp;&nbsp;&nbsp;error&nbsp;:&nbsp;function()&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(&#39;fail&#39;);
&nbsp;&nbsp;&nbsp;&nbsp;}
});
@WebServlet(&quot;/FromAjaxservlet&quot;)
public&nbsp;class&nbsp;FromAjaxservlet&nbsp;extends&nbsp;HttpServlet{
&nbsp;&nbsp;&nbsp;&nbsp;protected&nbsp;void&nbsp;doGet(HttpServletRequest&nbsp;req,&nbsp;HttpServletResponse&nbsp;resp)&nbsp;throws&nbsp;ServletException,&nbsp;IOException&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;try&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//创建默认连接
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CloseableHttpClient&nbsp;httpClient&nbsp;=&nbsp;HttpClients.createDefault();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//创建HttpGet对象,处理get请求,转发到A站点
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;HttpGet&nbsp;httpGet&nbsp;=&nbsp;new&nbsp;HttpGet(&quot;https://panxu.net:8080/A/FromServlet?userName=&quot;+req.getParameter(&quot;userName&quot;));&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//执行
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CloseableHttpResponse&nbsp;response&nbsp;=&nbsp;httpClient.execute(httpGet);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int&nbsp;code&nbsp;=&nbsp;response.getStatusLine().getStatusCode();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//获取状态
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;System.out.println(&quot;http请求结果为:&quot;+code);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(code&nbsp;==&nbsp;200){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//获取A站点返回的结果
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;String&nbsp;result&nbsp;=&nbsp;EntityUtils.toString(response.getEntity());
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;System.out.println(result);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//把结果返回给B站点
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resp.getWriter().print(result);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;response.close();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;httpClient.close();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;catch&nbsp;(Exception&nbsp;e)&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;}
}</pre>解决方式四：使用nginx搭建企业级接口网关方式www.a.a.com不能直接请求www.b.b.com的内容，可以通过nginx，根据同域名，但项目名不同进行区分。什么意思呢？这么说可能有点抽象。假设我们公司域名叫panxu.net当我们需要访问www.a.a.com通过panxu.net/A访问，并通过nginx转发到www.a.a.com当我们需要访问www.b.b.com通过panxu.net/B访问，并通过nginx转发到www.a.a.com我们访问公司的域名时，是&quot;同源&quot;的，只是项目名不同，此时项目名的作用只是为了区分，方便转发。如果你还不理解的话，先看看我是怎么进行配置的：<pre class="brush:bash;toolbar:false">server&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;listen&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;80;
&nbsp;&nbsp;&nbsp;&nbsp;server_name&nbsp;&nbsp;www.nginxtest.com;
&nbsp;&nbsp;&nbsp;&nbsp;location&nbsp;/A&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;proxy_pass&nbsp;&nbsp;http://a.a.com:81;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;index&nbsp;&nbsp;index.html&nbsp;index.htm;
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;location&nbsp;/B&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;proxy_pass&nbsp;&nbsp;http://b.b.com:81;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;index&nbsp;&nbsp;index.html&nbsp;index.htm;
&nbsp;&nbsp;&nbsp;&nbsp;}
}</pre>我们访问以panxu.net开头且端口为80的网址，nginx将会进行拦截匹配，若项目名为A，则分发到a.a.com:81。实际上就是通过&quot;同源&quot;的域名，不同的项目名进行区分，通过nginx拦截匹配，转发到对应的网址。整个过程，两次请求，第一次请求nginx服务器，第二次nginx服务器通过拦截匹配分发到对应的网址。以上就是关于“Ajax跨域的解决方案”的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流。

Ajax跨域的解决方案

From CSDN博客

Still Have Questions?