node跨域方法
- 第一种:jsonp
参看用nodejs实现json和jsonp服务 - 第二种:res.wirteHead
node部分
var http = require('http')
var url = require('url')
var querystring = require('querystring')
var port = 9000
var jsonData = { 'name': 'xiaohong', 'job': 'daboss' }
http.createServer(function (req, res) {
// var pathStr = url.parse(req.url)
res.writeHead(200, {
'Content-Type': 'application/json;charset=utf-8',
'Access-Control-Allow-Credentials': true,
'Access-Control-Allow-Origin': '*'
})
var type = req.method;
if (type == 'GET') {
res.end(JSON.stringify(jsonData))
} else if (type == 'POST') {
var str = '';
req.on('data',function(chunk){
str += chunk;
})
req.on('end',function(){
var data = querystring.parse(str)
console.log(data)
if(data.name == "" || data.job == ""){
res.end(JSON.stringify({'success':true,msg:'填写有误'}))
}else{
res.end(JSON.stringify({'success':false,msg:'添加成功'}))
}
})
}
}).listen(port, function () {
console.log('server is runing at port ' + port)
})
重点部分是添加响应头信息
res.writeHead(200, {
'Content-Type': 'application/json;charset=utf-8',
'Access-Control-Allow-Credentials': true,
'Access-Control-Allow-Origin': '*' //可以是*,也可以是跨域的地址
})
在ajax里不需要做任何特殊处理dataType仍旧是json
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<a class="click" href="javascript:get_jsonp()">click me</a>
<p class="result"></p>
<label>姓名:</label>
<input class="name" type="text" />
<label>职位:</label>
<input class="job" type="text">
<a class="add" href = "javascript:add()">添加</a>
<p class="msg"></p>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function get_jsonp() {
$.ajax({
type: 'get',
dataType: 'json',
url: 'http://localhost:9000',
success: function (data) {
$('.result').html('my name is ' + data.name)
},
error: function (err) {
$('.result').html('出错了 ' + err.status)
}
})
}
function add(){
$.ajax({
type:'post',
url:'http://localhost:9000',
dataType:'json',
data:{
'name':$(".name").val(),
'job':$(".job").val()
},
success:function(data){
$('.msg').html(data.msg)
},
error:function(err){
$('.msg').html('出错了'+err.status)
}
})
}
</script>
</body>
</html>node跨域方法的更多相关文章
- node 跨域问题
node跨域有很多方法 1.引入 中间件cors 我觉的最好的方法 var express=require('express'); var cors=require('cors'); var app= ...
- Node 跨域问题 Access to XMLHttpRequest at 'http://localhost:8080/api/user/login' from origin 'http://localhost:808
人不可能踏进同一条河流,我可以一天在同一个问题上摔倒两次. 这次是跨域问题,都是泪,教程提供的服务端代码虽然配置了文件,但是依然是没有解决跨域问题,依然报错 Request header field ...
- js中几种实用的跨域方法原理详解(转)
今天研究js跨域问题的时候发现一篇好博,非常详细地讲解了js几种跨域方法的原理,特分享一下. 原博地址:http://www.cnblogs.com/2050/p/3191744.html 下面正文开 ...
- js中几种实用的跨域方法原理详解
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- 前端Js跨域方法汇总—剪不断,理还乱,是跨域
1.通过jsonp跨域2.通过修改document.domain来跨子域(iframe)3.隐藏的iframe+window.name跨域4.iframe+跨文档消息传递(XDM)5.跨域资源共享 C ...
- JavaScript跨域方法
一.什么是跨域 JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦.这里把涉及到跨域的一些问题简单地整理一下: ...
- JS跨域方法及原理
JS跨域分析判断 JS跨域:在不同域之间,JS进行数据传输或通信.比如ajax向不同的域请求数据.JS获取iframe中的页面中的值(iframe内外不同域) 只要协议.端口.域名有一个不同则 ...
- [转]js中几种实用的跨域方法原理详解
转自:js中几种实用的跨域方法原理详解 - 无双 - 博客园 // // 这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同 ...
- JavaScript 跨域方法总结
同源策略 在客户端编程语言中,如javascript和 ActionScript,同源策略是一个很重要的安全理念,它在保证数据的安全性方面有着重要的意义.同源策略规定跨域之间的脚本是隔离的,一个域的脚 ...
随机推荐
- Java--面向对象三大特征-->封装、继承、多态
简介 在面向过程当中只有存在封装(对功能的封装 例如c语言中的函数),而在面向对象中才存在这三大特性. 继承 -->inheritance 1.子类可以从父类继承属性和方法(除去父类私有化的方法 ...
- 关于Apache Commons-IO的使用
commons-io是一款处理io流的工具,封装了很多处理io流和文件的方法,可以大大简化我们处理io流和操作文件的代码.从common-io的官方使用文档可以看出,它主要分为工具类.尾端类.行迭代器 ...
- mysql中in和exist的区别
mysql中in和exists的区别 -- in写法select * from A where A.id in (select bid from B ) and A.name in (select ...
- django框架基础-视图系统-长期维护
################## 什么是视图? ####################### 视图: 1,一个视图函数(类),简称视图,是一个简单的Python 函数(类),它接受W ...
- centos5.5 下面 lnmp环境遇到的小问题
A)nginx 启动:/www/nginx/sbin/nginx -c /www/nginx/conf/nginx.conf 查看: ps -ef | grep nginx 停止:强制停止所有Ngin ...
- LeetCode Day 7
LeetCode0012 罗马数字包含以下七种字符: I, V, X, L,C,D 和 M. 字符 I V X L C D M 数值 1 5 10 50 100 500 1000 例如, 罗马数字 2 ...
- 关于Angular2与蚂蚁的NG-ZOORO一同开发时[disabled]="true"动态绑定失效的解决方法
在使用Angular2与蚂蚁的NG-ZOORO一同开发时,当我们的表单使用的是formControlName="value"时[disabled]="true" ...
- java异常分析;剖析printStackTrace和fillInStackTrace
Java异常的栈轨迹(Stack Trace) 捕获到异常时,往往需要进行一些处理.比较简单直接的方式就是打印异常栈轨迹Stack Trace.说起栈轨迹,可能很多人和我一样,第一反应就是printS ...
- python实现经典冒泡算法
利用for循环,完成a=[1,7,4,89,34,2]的冒泡排序 冒泡排序:小的排在前,大的排在后面
- 用数组实现栈(C++)
#include <iostream> //栈的数组实现 using namespace std; #define MAXSIZE 10; template<class T> ...