跨域问题解决方案

一、解决方案一----设置请求头

  设置请求头,在请求的资源中设置Access-Control-Allow-Origin请求头
  response.setHeader("Access-Control-Allow-Origin", "*");

1、目录展示

  跨域问题解决方案_第1张图片

 2、A项目导入依赖

  跨域问题解决方案_第2张图片

 3、A项目AServlet

package com.a;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/AServlet")
public class AServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1、接收数据
        String username = request.getParameter("username");
        System.out.println("接收的数据:"+username);

        //2、响应结果
        response.getWriter().write("success!");

        //3、设置响应头
        response.setHeader("Access-Control-Allow-Origin", "*");

    }
}

4、B项目bindex.jsp

<%--
  Created by IntelliJ IDEA.
  User: zheng
  Date: 2020/2/6
  Time: 14:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>跨域解决方案title>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js">script>
    <script>
        $(function () {
            $("#button").click((function () {
                //获取文本框的值
                var username=$("#username").val();
                //发送Ajax请求到www.a.com的A工程
                $.ajax({
                    url:"http://www.a.com:8080/A/AServlet",
                    data:{"username":username},
                    type:"POST",
                    success:function (result) {
                        alert(result);
                    },
                    error:function () {
                        alert("系统错误!")
                    }
                })
            }))
        })
    script>
head>
<body>
    数据:<input type="text" name="username" id="username"/>
    <input type="button" id="button" value="请求"/>
body>
html>

5、跨域效果

  跨域问题解决方案_第3张图片

  

6、解决效果

  跨域问题解决方案_第4张图片

   跨域问题解决方案_第5张图片

二、解决方案二----JSONP

  普通的跨域访问问题,浏览器会进行拦截,凡是src属性的都不会拦截

   JSONP实现原理:动态加载

你可能感兴趣的:(跨域问题解决方案)