ajax访问跨域资源问题

ajax访问跨域资源问题

在本案列中项目主要使用的是分布式微服务架构，项目的整体框架如下：

learn_peace_index 是首页微服务，在首页的页面中通过ajax需要去调用learn_peace_backgroun后台微服务中的接口，这就涉及到跨境资源访问。

问题：如果按照ajax的常规请求方式，能够访问到learn_peace_backgroun微服务的接口,后台能够正确进行处理，但是在浏览器端会出现No Access Controller-Allow-Origin ，这是由于浏览器的安全控制行为：同源策略（协议，域名，端口三者一样）, ajax去访问非同源，默认是危险的行为，能发过去但是浏览器不会进行处理。

解决方案：使用script标签来解决此问题。
在首页微服务的index.jsp页面中：

<script type="text/javascript">
    function call(data) {
        console.log(data);
    }
</script>

<!--ajax解决跨域问题-->
<script src="http://localhost:8081/product/listForJson?callback=call" type="text/javascript"></script>

在后台微服务中的接口：

@RestController
@RequestMapping("product")
public class ProductTypeController {

    @Reference
    private IProductTypeService productTypeService;

    @GetMapping("list1")
    public List<TProductType> list(){
         return productTypeService.list();
    }

    @GetMapping("listForJson")
    public String listForJson(String callback){
        //获取要回调的客户端程序
        System.out.println(callback);
        //回调这个函数
        List<TProductType> list = productTypeService.list();
        //list转换为json 填充到回调函数
        Gson gson = new Gson();
        String json = gson.toJson(list);
        return callback +"("+json+")";
        
    }
}

需要将list转换为json,在pom.xml文件中加入依赖

		<dependency>
			<groupId>com.google.code.gson</groupId>
			<artifactId>gson</artifactId>
			<version>2.8.0</version>
		</dependency>

运行结果：客户端浏览器打印的结果：