HTML跨域问题求解。。。。。

晨曦夜未央 2016-09-19 04:05:07

被一个恶心的问题卡了几天了，只好求助大神。。。。后端Java，前端HTML，放到服务器上以后报错 No 'Access-Control-Allow-Origin' header is present on the requested resource，看攻略设置过了filter。。有显示了但是好像没效果。。。(jsonp看不太懂)chrome里面明明已经出现这个了可还是报这个错，network里面是这么显示的（我是GIT下来的，JRE:eclipse，Server:tomcat,模式：maven，浏览器：Chrome）：



General：

      Request URL:http://localhost:8080/BIM/

      Request Method:GET

      Status Code:304 Not Modified

      Remote Address:[::1]:8080

Response Headers：

      Access-Control-Allow-Headers:Content-Type,api_key,Authorization,X-Requested-With,Accept,Origin,Last-Modified

      Access-Control-Allow-Method:GET,POST,PUT,DELETE,HEAD,OPTIONS

      Access-Control-Allow-Origin:http:/IP:8080/*

      Date:Mon, 19 Sep 2016 07:00:52 GMT

      ETag:W/"1586-1473818917970"

      Server:Apache-Coyote/1.1

Request Headers：

      Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8

      Accept-Encoding:gzip, deflate, sdch

      Accept-Language:zh-CN,zh;q=0.8

      Cache-Control:max-age=0

      Connection:keep-alive

      Cookie:Idea-81111fc3=709636a5-614f-4e8f-92e8-c48199b380d2

      Host:localhost:8080

      If-Modified-Since:Wed, 14 Sep 2016 02:08:37 GMT

      If-None-Match:W/"1586-1473818917970"

      Upgrade-Insecure-Requests:1

      User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Saf      ari/537.36

求大腿给个具体实施步骤（例：在**加**，用来**），这个是我的具体的代码，顺便请大腿给点代码上的建议（我是自学的。。。没有系统的学过。。所以好多都是模仿着来，跪求指导）
前端ajax请求：



//显示项目列表

function loadProjectList(){

$("#pro_ul").empty();

$.ajax({

url:path+"/pro_managmt/showAll_project",    //path：var path = "http://IP:8080/project"

type:"GET",

dataType:"json",

success:function(result){

var s= result.data;

//循环集合

for(var i=0;i<s.length;i++){

//获取项目ID

var pro_id = s[i].pro_id;

var pro_name = s[i].pro_name;

var pro_create_date=s[i].pro_create_date;

var pro_introduction=s[i].pro_introduction;

//创建一个项目列表<li>元素

createProjectLi(pro_id,pro_name,pro_create_date,pro_introduction);

}

},

error:function(){

alert("加载项目列表失败");

}

});

};

//Controller部分





@Controller

@RequestMapping("/pro_managmt")

public class Pro_Controller {	

@Resource

Project_EnService	project_EnService;	

//加载项目列表

@RequestMapping("/showAll_project")

@ResponseBody

public ReturnResult<List<Project_en>> execute_findAll_pro(){

ReturnResult<List<Project_en>> result = project_EnService.loadAllProject();

return result;

}

//Service部分



public interface Project_EnService {

public ReturnResult<List<Project_en>>  loadAllProject();

}

//ServiceImpl部分



@Service("project_EnService")

public class Project_EnServiceImpl implements Project_EnService {	

@Resource

Project_enDao project_enDao;

//加载项目列表

public ReturnResult<List<Project_en>> loadAllProject(){

List<Project_en> list=project_enDao.findAllProject();

ReturnResult<List<Project_en>> result = new ReturnResult<List<Project_en>>();

result.setStatus(0);

result.setMsg("加载成功");

result.setData(list);

return result;

}

/***************无***************脑***************的***************分***************割***************线***************/
//Dao部分



public interface Project_enDao {

public List<Project_en> findAllProject();

}

/***************无***************脑***************的***************分***************割***************线***************/

网上找来的写拦截器的代码是：



public class CORSfilter implements Filter {



    /**

     * Default constructor. 

     */

    public CORSfilter() {

    }



/**

 * @see Filter#destroy()

 */

public void destroy() {

// TODO Auto-generated method stub

}



/**

 * @see Filter#doFilter(ServletRequest, ServletResponse, FilterChain)

 */

public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {

// place your code here

HttpServletResponse httpResponse=(HttpServletResponse) response;

httpResponse.setHeader("Access-Control-Allow-Origin", "http://IP:8080/* ");

httpResponse.setHeader("Access-Control-Allow-Headers", 

"Content-Type,api_key,Authorization,X-Requested-With,Accept,Origin,Last-Modified");  

httpResponse.setHeader("Access-Control-Allow-Method", "GET,POST,PUT,DELETE,HEAD,OPTIONS");  



// pass the request along the filter chain

chain.doFilter(request, response);

}

/**

 * @see Filter#init(FilterConfig)

 */

public void init(FilterConfig fConfig) throws ServletException {

// TODO Auto-generated method stub

}

}

对应的web.xml配置文件代码：

 

<filter>

    <display-name>CORSfilter</display-name>

    <filter-name>CORSfilter</filter-name>

    <filter-class>com.uncommonat.util.CORSfilter</filter-class>

  </filter>

  <filter-mapping>

    <filter-name>CORSfilter</filter-name>

    <url-pattern>/*</url-pattern>

  </filter-mapping>

...全文

654 12 打赏收藏转发到动态举报

写回复

用AI写文章

12 条回复

切换为时间正序

请发表友善的回复…

发表回复

晨曦夜未央 2016-09-21

打赏
举报

大哥。。按照你说的方法想去试试。。但是还是不怎么懂

麻烦大哥帮我具体看看、。。。
然后昨天还用nginx设置过头。。而且网页工具里面显示已经有了，但是还是报这个错误，像这样：

我已经快崩溃了。。。。。

还有个疑惑。。就是我访问都是我自己项目里面的URL，，照理说，域名没有变啊。为什么算是跨域问题呢

始于终结的歌请你安静地听小号 2016-09-21

打赏
举报

引用 5 楼 YeCaiHong 的回复:

如果你用的是springMVC4.2.5的话，可以在配置文件加上这个

<mvc:cors>
<mvc:mapping path="/**" allowed-origins="*" allow-credentials="true" max-age="1800" allowed-methods="GET,POST,OPTIONS"/>
</mvc:cors>

纠正一下，昨晚测试了一下，发现IE要IE10已经IE10以上版本才支持
引用网上的一张图片

cheery_an 2016-09-20

打赏
举报

你的后端是restful或者是webservice么，这个是restful的解决办法，http://blog.csdn.net/luosijin123/article/details/48002375 实在不行，只有各自的后端进行通信了

晨曦夜未央 2016-09-20

打赏
举报

可是用jsonp的话，后台代码不是要改许多么。。。我看别人的貌似后台挺清爽的。。。没有和jsonp有关的欸

始于终结的歌请你安静地听小号 2016-09-20

打赏
举报

引用 9 楼 YueXiaampDuMian 的回复:

[quote=引用 6 楼 YeCaiHong 的回复:] [quote=引用 5 楼 YeCaiHong 的回复:] 我记得是这样的，你试试

我记得是这样的，你试试[/quote]

xc指的是传进去的参数咯？比如我这边要传一个pro_name，是不是写pro_name？还是说是我要得到的返回值？然后data还需要吗？[/quote] xc指的是回调的方法名，可以随便起，要跟后台返回的那个对应，接收返回值还是和以前一样

晨曦夜未央 2016-09-20

打赏
举报

引用 6 楼 YeCaiHong 的回复:

[quote=引用 5 楼 YeCaiHong 的回复:]
我记得是这样的，你试试

我记得是这样的，你试试[/quote]

xc指的是传进去的参数咯？比如我这边要传一个pro_name，是不是写pro_name？还是说是我要得到的返回值？
然后data还需要吗？

始于终结的歌请你安静地听小号 2016-09-20

打赏
举报

引用 7 楼 YueXiaampDuMian 的回复:

[quote=引用 5 楼 YeCaiHong 的回复:] 如果你用的是springMVC4.2.5的话，可以在配置文件加上这个  <mvc:cors> <mvc:mapping path="/**" allowed-origins="*" allow-credentials="true" max-age="1800" allowed-methods="GET,POST,OPTIONS"/> </mvc:cors> 不是的话
	$.ajax({
	    url: "",
	    type: "post",
	    dataType: "json",
	    contentType: 'application/json',
	    jsonp: "callback",
	    jsonpCallback:"xc",
	    async: true,
	    success: function(e){},
	    error: function(e){}
	});
@RequestMapping("/jsonp")
	@ResponseBody
	public String jsonp(){
		JSONObject ja = JSONObject.fromObject(data);
		//返回值  ajax的jsonpCallback值为  xc，所以返回值要这样   "xc(你要的数据)",因为JSONP跨域的原理就是。。。现在我说不清楚。。。
		//return "xc({'email':'EmailString','sex':'SexString','userName':'UserNameString'})";//自己拼接也可以
		return "xc(" + ja + ")";//转JSON对象也可以
		
	}

我去试试后面的。。。。我用的是3.2.8 .。。。。好气啊用新的jar包不会整合配置。。老是出现一大堆的问题。只好用老的了[/quote] 有问题可以私信我

晨曦夜未央 2016-09-20

打赏
举报

引用 5 楼 YeCaiHong 的回复:

如果你用的是springMVC4.2.5的话，可以在配置文件加上这个  <mvc:cors> <mvc:mapping path="/**" allowed-origins="*" allow-credentials="true" max-age="1800" allowed-methods="GET,POST,OPTIONS"/> </mvc:cors> 不是的话
	$.ajax({
	    url: "",
	    type: "post",
	    dataType: "json",
	    contentType: 'application/json',
	    jsonp: "callback",
	    jsonpCallback:"xc",
	    async: true,
	    success: function(e){},
	    error: function(e){}
	});
@RequestMapping("/jsonp")
	@ResponseBody
	public String jsonp(){
		JSONObject ja = JSONObject.fromObject(data);
		//返回值  ajax的jsonpCallback值为  xc，所以返回值要这样   "xc(你要的数据)",因为JSONP跨域的原理就是。。。现在我说不清楚。。。
		//return "xc({'email':'EmailString','sex':'SexString','userName':'UserNameString'})";//自己拼接也可以
		return "xc(" + ja + ")";//转JSON对象也可以
		
	}

我去试试后面的。。。。我用的是3.2.8 .。。。。好气啊用新的jar包不会整合配置。。老是出现一大堆的问题。只好用老的了

始于终结的歌请你安静地听小号 2016-09-20

打赏
举报

引用 5 楼 YeCaiHong 的回复:

我记得是这样的，你试试

我记得是这样的，你试试

始于终结的歌请你安静地听小号 2016-09-20

打赏
举报

如果你用的是springMVC4.2.5的话，可以在配置文件加上这个  <mvc:cors> <mvc:mapping path="/**" allowed-origins="*" allow-credentials="true" max-age="1800" allowed-methods="GET,POST,OPTIONS"/> </mvc:cors> 不是的话


	$.ajax({
	    url: "",
	    type: "post",
	    dataType: "json",
	    contentType: 'application/json',
	    jsonp: "callback",
	    jsonpCallback:"xc",
	    async: true,
	    success: function(e){},
	    error: function(e){}
	});


@RequestMapping("/jsonp")
	@ResponseBody
	public String jsonp(){
		JSONObject ja = JSONObject.fromObject(data);
		//返回值  ajax的jsonpCallback值为  xc，所以返回值要这样   "xc(你要的数据)",因为JSONP跨域的原理就是。。。现在我说不清楚。。。
		//return "xc({'email':'EmailString','sex':'SexString','userName':'UserNameString'})";//自己拼接也可以
		return "xc(" + ja + ")";//转JSON对象也可以
		
	}

Go 旅城通票 2016-09-20

打赏
举报

引用 2 楼 YueXiaampDuMian 的回复:

可是用jsonp的话，后台代码不是要改许多么。。。我看别人的貌似后台挺清爽的。。。没有和jsonp有关的欸

你不想改代码就做代理页面了，用你网站代理页面的服务器端xhr请求跨域地址，ajax请求代理页面，而不是直接请求跨域地址

Go 旅城通票 2016-09-19

打赏
举报

httpResponse.setHeader("Access-Control-Allow-Origin", "http://IP:8080/* "); Access-Control-Allow-Origin:http:/IP:8080/* java不懂，看你响应头明显少了一个斜杠，而且这个Access-Control-Allow-Origin设置也有问题。。后面的/*不需要，ip要替换为具体的ip地址而且跨域后你用jquery的ajax在IE10-下不发送请求的，具体看这个：jquery1.5+ ajax跨域请求在IE下没反应分析并且IE用的XDomainRequest对象发送跨域请求，不是XMLHttpRequest 所以你跨域最好将数据改为jsonp的，要不兼容性有得你搞。。什么是jsonp数据自己了解上，简单来说就是一段可以执行的js代码，类似回调函数(参数。。。。。。。。)

添加静态服务node.js，以允许在chrome中进行调试而不会出现跨域问题。设置TDD和Browserify的测试。创建数独对象/类创建瓷砖商店创建图块对象创建数独求解器从json加载种子拼图创建数独制作器使Areas...

之后在网上查vue 跨域问题。大部分都是说在Config/index.js 里面进行配置proxyTable: {}初始的proxyTable: {}是个空的,改成proxyTable: {'/api': { //使用"/api"来代替"http://f.apiplus.c"target: 'http...

为什么提示后端判断为GET提交求解document.addEventListener('plusready', function(){var xhr = new plus.net.XMLHttpRequest();xhr.onreadystatechange = function () {switch ( xhr.readyState ) {case 0:alert...

刚开始使用的vue-resource.js来异步请求json文件，那么就牵扯到了跨域问题。在前端使用了node服务器来代理。so easy对不对？但问题是只有一个页面，而且东西不是很多，希望把css、hml、js直接放在一起，直接点击html...

目前有几个工作流系统，每个系统都...使用ajax时，会出现跨域问题。因此，将这个需求和碰到的问题发到这里，请各位大牛们帮忙解决。。转载于:https://www.cnblogs.com/McJeremy/archive/2011/03/14/1983281.html